React component to create tooltips for SVG elements
npm install react-svg-tooltipA React component to create tooltips for SVG elements.
The library offers a Tooltip component which can be embedded into any SVG element hierarchy.
The component does not actually provide a tooltip.
Instead, it provides a 0-based coordinate system relative to the current mouse position, so you can place your favorite SVG elements in whichever style suits your needs.
Behind the scenes, the library handles all mouse listener logic and makes sure that your tooltip is always rendered on top of all other SVG elements (by using a React portal).
You might want to read this blog post for further details.
npm install react-svg-tooltip
Note that react and react-dom peer dependencies must already be installed in version 16.3.x or above.
This example demonstrates how to attach a rectangular tooltip with some text to a circle shape.
The triggerRef property accepts a reference to an arbitrary element (a circle in our example), which further serves as the mouse trigger.
Note how the x/y-coordinates of the tooltip contents (rect and text) can be expressed relative to the mouse position.
``jsx
import * as React from 'react';
import { Tooltip } from 'react-svg-tooltip';
const App = () => {
const circleRef = React.createRef
return (
export default App;
`

By default, the tooltip is added to the SVG root element which parents the triggering element.
This can be limiting in certain scenarios, e.g. if a small SVG triggers a tooltip which is larger than its own SVG root.
It is therefore possible to add the tooltip to a different SVG root, making glass-pane-like usages possible.
The following example illustrates how 3 small SVG tiles can display tooltips on a shared SVG glass pane.
The wiring is achieved through the containerRef property.
`jsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Tooltip } from "react-svg-tooltip";
import "./index.css";
const App = () => {
const containerRef = React.createRef
const triggerRef1 = React.createRef
const triggerRef2 = React.createRef
const triggerRef3 = React.createRef
return (
yet spanning across SVG boundaries
yet spanning across SVG boundaries
yet spanning across SVG boundaries
ReactDOM.render(
``

Based on typescript-library-starter-lite.
Licensed under MIT License.
© Rahel Lüthy 2018