Package Exports
- react-tooltip
- react-tooltip/dist/react-tooltip.cjs.min.js
- react-tooltip/dist/react-tooltip.css
- react-tooltip/dist/react-tooltip.esm.min.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-tooltip) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-tooltip
If you like the project, please give the project a GitHub 🌟
Demo
Documentation for V4 - Github Page.
Documentation for V5 - ReactTooltip.
Bundle size comparison V4 -> V5
Installation
npm install react-tooltip
or
yarn add react-tooltip
Usage
⚠️ If you were already using
react-tooltip<=5.7.5
, you'll be getting some deprecation warnings regarding theanchorId
prop and some other features. In versions >=5.8.0, we've introduced thedata-tooltip-id
attribute, and theanchorSelect
prop, which are our recommended methods of using the tooltip moving forward. Check the docs for more details.
Using NPM package
1 . Import the CSS file to set default styling.
⚠️ You must import the CSS file or the tooltip won't show!
import 'react-tooltip/dist/react-tooltip.css'
This needs to be done only once. We suggest you do it on your src/index.js
or equivalent file.
2 . Import react-tooltip
after installation.
import { Tooltip } from 'react-tooltip'
or if you want to still use the name ReactTooltip as V4:
import { Tooltip as ReactTooltip } from 'react-tooltip'
3 . Add data-tooltip-id="<tooltip id>"
and data-tooltip-content="<your placeholder>"
to your element.
data-tooltip-id
is the equivalent of V4'sdata-for
.
<a data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">
◕‿‿◕
</a>
4 . Include the <Tooltip />
element.
Don't forget to set the id, it won't work without it!
<Tooltip id="my-tooltip" />
Using multiple anchor elements
You can also set the anchorSelect
tooltip prop to use the tooltip with multiple anchor elements without having to set data-tooltip-id
on each of them.
anchorSelect
must be a valid CSS selector.
<a className="my-anchor-element" data-tooltip-content="Hello world!">
◕‿‿◕
</a>
<a className="my-anchor-element" data-tooltip-content="Hello to you too!">
◕‿‿◕
</a>
<Tooltip anchorSelect=".my-anchor-element" />
Check the V5 docs for more complex use cases.
Standalone
You can import node_modules/react-tooltip/dist/react-tooltip.[mode].js
into your page. Please make sure that you have already imported react
and react-dom
into your page.
mode: esm
cjs
umd
Don't forget to import the CSS file from node_modules/react-tooltip/dist/react-tooltip.css
to set default styling. This needs to be done only once in your application.
PS: all the files have a minified version and a non-minified version.
Options
For all available options, please check React Tooltip Options
Security note
The html
option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like sanitize-html. We chose not to include sanitization after discovering it increased our package size too much - we don't want to penalize people who don't use the html
option.
JSX note
You can use renderToStaticMarkup()
function to use JSX instead of HTML.
Example:
import ReactDOMServer from 'react-dom/server';
[...]
<a
data-tooltip-id="my-tooltip"
data-tooltip-html={ReactDOMServer.renderToStaticMarkup(<div>I am <b>JSX</b> content</div>)}
>
◕‿‿◕
</a>
Article
How I insert sass into react component
Maintainers
danielbarion Maintainer - Creator of React Tooltip >= V5.
gabrieljablonski Maintainer.
aronhelser (inactive).
alexgurr (inactive).
pdeszynski (inactive).
roggervalf (inactive).
huumanoid (inactive)
wwayne (inactive) - Creator of the original React Tooltip (V1.x ~ V4.x.)
We would gladly accept a new maintainer to help out!
Contributing
We welcome your contribution! Fork the repo, make some changes, submit a pull-request! Our contributing doc has some details.
License
MIT