useTooltip is a React hook to easily create tooltip in your React components.
@seracio/tooltip has 2 peer dependencies that need to be installed first
npm i react d3-selection
npm i @seracio/tooltipYou 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-tooltipattribute - In this attribute, you can specify html or simple text (no jsx though)
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 (
<div
style={{
position: "relative",
width: "100%",
maxWidth: "600px",
margin: "auto",
}}
ref={root}
>
<Tooltip />
<svg preserveAspectRatio="xMidYMid meet" viewBox={`0 0 ${size} ${size}`}>
{data.map((d, i) => {
return (
<rect
style={{ cursor: "pointer" }}
key={i}
data-tooltip={`rect number ${i + 1}`}
data-tooltip-index={i}
{...d}
fill={targetIndex === i ? "red" : "blue"}
/>
);
})}
</svg>
</div>
);
};
<MyComponent />;// TODO