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

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)

import{useState}from"react";import{useTooltip,useTooltipArea}from"@seracio/tooltip";constMyComponent=()=>{const[targetIndex,set]=useState(-1);const[Tooltip,root]=useTooltip({enterCb: (el)=>set(+el.getAttribute("data-tooltip-index")),leaveCb: (el)=>set(-1),});constsize=500;constdata=[{x: 0,y: 0,width: 100,height: 100,},{x: 300,y: 200,width: 50,height: 80,},];return(<divstyle={{position: "relative",width: "100%",maxWidth: "600px",margin: "auto",}}ref={root}><Tooltip/><svgpreserveAspectRatio="xMidYMid meet"viewBox={`0 0 ${size}${size}`}>{data.map((d,i)=>{return(<rectstyle={{cursor: "pointer"}}key={i}data-tooltip={`rect number ${i+1}`}data-tooltip-index={i}{...d}fill={targetIndex===i ? "red" : "blue"}/>);})}</svg></div>);};<MyComponent/>;

API

// TODO