react-tooltip

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

---

Why do we show ads on our docs?

• ReactTooltip is an open source project, this is the way we found to be financed by the community.

Demo

Documentation for V4 - Github Page.

Documentation for V5 - ReactTooltip.

Documentation for V6 - ReactTooltip.

---

Installation

npm install react-tooltip

or

yarn add react-tooltip

React Compatibility

react-tooltip supports React 16.14.0 and newer through peer dependencies, including React 17, 18, and 19.

The project is currently validated against React 19, but the published package remains compatible with older supported React versions.

React version	Supported
16.14+	Yes
17.x	Yes
18.x	Yes
19.x	Yes

Server Components

react-tooltip is a client-side library. It uses hooks, DOM observers, browser events, and layout measurement, so the tooltip component itself must run inside a client component boundary.

This works well in frameworks such as Next.js with Server Components, but you should render <Tooltip /> from a client component and attach your tooltip attributes or selectors from elements rendered under that client boundary.

If you are using React Server Components, the practical rule is simple:

• server components can render the anchor markup
• client components should render and control react-tooltip

In Next.js, the usual pattern is to export the tooltip from a small wrapper file marked with 'use client'.

Sponsors

Gold Sponsors 🌟

React Tooltip is proud to be sponsored by Frigade, a developer tool for building better product onboarding: guided tours, getting started checklists, announcements, etc.

Silver Sponsors ✪

Powered by

Usage

1 . Import the CSS file to set default styling.

[!WARNING]\ If you are using a version before than v5.13.0, 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 and only if you are using a version before than 5.13.0. 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.

[!NOTE]\ Don't forget to set the id, it won't work without it!

<Tooltip id="my-tooltip" />

Troubleshooting

Before trying these, make sure you're running the latest ReactTooltip version with

npm install react-tooltip@latest

or

yarn add react-tooltip@latest

Please check our troubleshooting section on our docs.

If you can't find your problem here, make sure there isn't an open issue already covering it. If there isn't, feel free to submit a new issue.

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