Start a local development server using yarn start. This command opens a browser window and supports live reloading for most changes.

$ yarn start

Install the react-tooltip package using npm or yarn.

npm install react-tooltip

or

yarn add react-tooltip

By default, tooltips disappear when the pointer leaves the anchor element. To allow users to interact with elements inside the tooltip (like buttons or inputs) or to satisfy WCAG 'hoverable' requirements, use the clickable prop on the <Tooltip /> component.

<a id="clickable">◕‿‿◕</a>
<Tooltip anchorSelect="#clickable" clickable>
  <button>You can click me!</button>
</Tooltip>

The type prop used in V4 for styling has been renamed to variant in V5.

Available values for variant are:

• 'dark'
• 'light'
• 'success'
• 'warning'
• 'error'
• 'info'

You can apply the variant via the Tooltip component or directly on the anchor element using the data-tooltip-variant attribute.

import { Tooltip } from 'react-tooltip';

<a
  data-tooltip-id="my-tooltip"
  data-tooltip-content="Hello world!"
  data-tooltip-variant="success"
>
  ◕‿‿◕
</a>
<Tooltip id="my-tooltip" />

For versions v5.13.0 or newer, styles are injected into the page by default and no manual import is required.

If you are using a version older than v5.13.0, you must manually import the CSS file for the tooltip to appear. It is recommended to do this once in your src/index.js or equivalent entry point.

import 'react-tooltip/dist/react-tooltip.css'

Generate static content for the website by running yarn build. The output will be placed in the build directory and can be hosted on any static content hosting service.

$ yarn build

To style the tooltip using CSS classes, pass a string to the className prop.

Note on Specificity: Because react-tooltip uses default styles, you may need to increase your CSS specificity to override them without using !important. For example, instead of just .example, use .parent-class .example to ensure your rules take precedence.

If you need to style the tooltip arrow specifically, you can target the .example-arrow class within your custom class.

import { Tooltip } from 'react-tooltip'

<style>
.example {
  color: #222;
  background-color: rgb(0, 247, 255);
}
</style>

<div className="example-container">
  <a
    data-tooltip-id="my-tooltip-styles"
    data-tooltip-content="Hello world!"
  >
    ◕‿‿◕
  </a>
  <Tooltip id="my-tooltip-styles" className="example" />
</div>

The React Tooltip Scaling Benchmark is an automated harness used to compare the mount/unmount performance of V5 and V6 across various tooltip counts. You can run a single pass, a full statistical run, or aggregate existing results.

# Single benchmark pass (5 repeats per count)
node benchmarks/run-benchmark.mjs

# Full statistical run (100 passes across 5 workers, then aggregate)
yarn benchmark:scaling:full -r 100 -w 5

# Aggregate the latest N results
node benchmarks/aggregate-benchmarks.mjs --latest 100

You can deploy the website using different methods depending on your access:

Using SSH:

$ USE_SSH=true yarn deploy

Using GitHub Username (Non-SSH):

$ GIT_USER=<Your GitHub username> yarn deploy

If you are using GitHub Pages for hosting, the yarn deploy command builds the website and pushes it to the gh-pages branch.

You can trigger tooltips by adding specific data-tooltip-* attributes to your anchor elements.

1. Import Tooltip from react-tooltip.
2. Add data-tooltip-id="<tooltip id>" and data-tooltip-content="<your text>" to your anchor elements.
3. Create a <Tooltip /> component and ensure its id matches the data-tooltip-id used on the anchors.

import { Tooltip } from 'react-tooltip'

// 1. Anchor elements with data attributes
<a
  data-tooltip-id="my-tooltip"
  data-tooltip-content="Hello world!"
  data-tooltip-place="top"
>
  ◕‿‿◕
</a>

// 2. The Tooltip element with matching ID
<Tooltip id="my-tooltip" />