Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/netzwerg/react-svg-tooltip
React component to create tooltips for SVG elements
https://github.com/netzwerg/react-svg-tooltip
reactjs svg tooltip typescript
Last synced: 4 days ago
JSON representation
React component to create tooltips for SVG elements
- Host: GitHub
- URL: https://github.com/netzwerg/react-svg-tooltip
- Owner: netzwerg
- License: other
- Created: 2018-05-17T08:05:50.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-09-04T13:43:59.000Z (over 5 years ago)
- Last Synced: 2024-12-02T01:29:51.725Z (about 1 month ago)
- Topics: reactjs, svg, tooltip, typescript
- Language: TypeScript
- Homepage:
- Size: 397 KB
- Stars: 17
- Watchers: 2
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React SVG Tooltip [](https://travis-ci.org/netzwerg/react-svg-tooltip) [](https://github.com/facebook/react/blob/master/LICENSE) [](https://www.npmjs.com/package/react-svg-tooltip)
A 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](https://reactjs.org/docs/portals.html)).
You might want to read [this blog post](https://netzwerg.ch/blog/2018/05/24/react-svg-tooltips/) for further details.
## Installation
`npm install react-svg-tooltip`
Note that `react` and `react-dom` peer dependencies must already be installed in version `16.3.x` or above.
## Basic Usage
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 (
Yay!
);
};
export default App;
```
[](https://codesandbox.io/s/4wjoopo1vx)
## Advanced Usage
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 (
SVG 1
SVG 2
SVG 3
A tooltip triggered by SVG 1
yet spanning across SVG boundaries
A tooltip triggered by SVG 2
yet spanning across SVG boundaries
A tooltip triggered by SVG 3
yet spanning across SVG boundaries
);
};
ReactDOM.render(, document.getElementById("root"));
```
[](https://codesandbox.io/s/w6vqpkv36l)
## Acknowledgements
Based on [typescript-library-starter-lite](https://github.com/tonysneed/typescript-library-starter-lite.git).
## License
Licensed under [MIT License](LICENSE).
© Rahel Lüthy 2018