Skip to content

ReactTooltip/react-tooltip

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
March 28, 2023 11:23
January 3, 2023 10:17

react-tooltip

Version typescript code style: prettier npm download minified minified gzip

If you like the project, please give the project a GitHub 🌟

Demo

Edit ReactTooltip

Documentation for V4 - Github Page.

Documentation for V5 - ReactTooltip.

Bundle size comparison V4 -> V5

Bundlephobia v4.5.1 Bundlephobia v5.9.0 Bundlezise timeline

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 the anchorId prop and some other features. In versions >=5.8.0, we've introduced the data-tooltip-id attribute, and the anchorSelect 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's data-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.

image

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