https://github.com/seracio/tooltip
A React custom hook to make tooltips
https://github.com/seracio/tooltip
hook open-source react
Last synced: 25 days ago
JSON representation
A React custom hook to make tooltips
- Host: GitHub
- URL: https://github.com/seracio/tooltip
- Owner: seracio
- License: mit
- Created: 2019-01-23T14:13:29.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-08T23:59:42.000Z (over 2 years ago)
- Last Synced: 2025-05-06T07:09:02.969Z (about 1 month ago)
- Topics: hook, open-source, react
- Language: TypeScript
- Homepage: https://seracio.github.io/tooltip/index.html
- Size: 830 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## useTooltip
> useTooltip is a React hook to easily create tooltip in your React components.
## Install
@seracio/tooltip has 2 peer dependencies that need to be installed first
```Shell
npm i react d3-selection
npm i @seracio/tooltip
```
## Usage
You need to be aware of several things:
- The hook returns 2 things: the component Tooltip itself and a ref to the container
- The container that will get the ref needs to be in relative position or it won't work
- The hook will make tooltips on each element with a `data-tooltip` attribute
- In this attribute, you can specify html or simple text (no jsx though)
```jsx
import { useState } from "react";
import { useTooltip, useTooltipArea } from "@seracio/tooltip";
const MyComponent = () => {
const [targetIndex, set] = useState(-1);
const [Tooltip, root] = useTooltip({
enterCb: (el) => set(+el.getAttribute("data-tooltip-index")),
leaveCb: (el) => set(-1),
});
const size = 500;
const data = [
{
x: 0,
y: 0,
width: 100,
height: 100,
},
{
x: 300,
y: 200,
width: 50,
height: 80,
},
];
return (
{data.map((d, i) => {
return (
);
})}
);
};
;
```
## API
// TODO