A tooltip for SVG paths in React
npm install react-path-tooltip
A simple react tooltip component for SVG paths, also known as SVGElements.
The component detects the visual context, such as SVG size, path relative location and size, and the display size needed for the text, and calculates an optimal orientation and rendering approach. See the sample below for better explanation.
See the code for this simple example here.
In order to install, run the following command:
~~~
$ npm install react-path-tooltip --save
~~~
App.tsx' example: `tsx
import React from "react"
import "./App.css"
import { PathTooltip } from "ReactPathTooltip" // import the packagefunction App() {
const svgRef = React.createRef()
const pathRef = React.createRef()
return (
< div className="App" >
< div className="Main">
export default App
``
| Prop | Type | Description |
| ---------- | ------ | ----------- |
| tip | string | Mandatory. The text to be displayed inside the tooltip. Must include simple text. No new lines, or html decoration |
| svgRef | React.RefObject
| pathRef | React.RefObject
| bgColor | string | Optional. Background color. Default: "black" |
| textColor | string | Optional. Text color. Default: "white" |
| fontFamily | string | Optional. The font family. Default: san-serif |
| fontSize | number | Optional. The font size. Default 12|
* When using the tooltip, make sure that the SVG elements are located in the code above the tooltip elements. The reason: In SVG, the rendering order is based on the document order. I.e. the first elements in the SVG document fragment getting "painted" first. Subsequent elements are painted on top of previously painted elements. Thus the order of elements is important to avoid issues with path elements rendered on top of tooltips.
* If the tooltip text is too long, then the tooltip controller will automatically wrap the text across multiple lines.