react-tooltip

What is react-tooltip?

The react-tooltip npm package is a versatile library for React that allows developers to easily add custom tooltips to their web applications. It provides a range of options for styling, positioning, and triggering tooltips, making it a convenient tool for enhancing user interface elements with additional information.

What are react-tooltip's main functionalities?

Simple Tooltips

This feature allows you to create simple tooltips with minimal configuration. By adding a 'data-tip' attribute to any React element and including the ReactTooltip component, a tooltip will appear on hover.

{"import React from 'react';\nimport ReactTooltip from 'react-tooltip';\n\nfunction App() {\n  return (\n    <div>\n      <p data-tip='hello world'>Hover over me to see the tooltip!</p>\n      <ReactTooltip />\n    </div>\n  );\n}\n\nexport default App;"}

Custom Styles

React-tooltip allows for custom styling of tooltips. You can specify the type (theme), effect, place, and even add custom classes for additional styling.

{"import React from 'react';\nimport ReactTooltip from 'react-tooltip';\n\nfunction App() {\n  return (\n    <div>\n      <p data-tip='Custom styles!' data-for='customStyle'>Hover over me!</p>\n      <ReactTooltip id='customStyle' type='dark' effect='solid' place='top' className='extraClass' />\n    </div>\n  );\n}\n\nexport default App;"}

Dynamic Content

Tooltips can display dynamic content that changes based on the application's state. This is useful for tooltips that need to update to reflect user interactions or other real-time data.

{"import React, { useState } from 'react';\nimport ReactTooltip from 'react-tooltip';\n\nfunction App() {\n  const [dynamicTip, setDynamicTip] = useState('Initial tooltip content');\n\n  return (\n    <div>\n      <p data-tip data-for='dynamicTip'>Hover over me for dynamic content!</p>\n      <ReactTooltip id='dynamicTip'>{dynamicTip}</ReactTooltip>\n      <button onClick={() => setDynamicTip('Updated tooltip content')}>Update Tooltip</button>\n    </div>\n  );\n}\n\nexport default App;"}

HTML Content

React-tooltip supports HTML content inside tooltips. This allows for more complex and styled content to be displayed within the tooltip.

{"import React from 'react';\nimport ReactTooltip from 'react-tooltip';\n\nfunction App() {\n  return (\n    <div>\n      <p data-tip data-for='htmlContent'>Hover over me for HTML content!</p>\n      <ReactTooltip id='htmlContent' dangerouslySetInnerHTML={{ __html: '<strong>HTML</strong> content' }} />\n    </div>\n  );\n}\n\nexport default App;"}

Other packages similar to react-tooltip

tippy.js

Tippy.js is a highly customizable tooltip and popover library powered by Popper.js. It offers a wide range of options and plugins for creating interactive tooltips and popovers. Compared to react-tooltip, Tippy.js provides more out-of-the-box animations and is not limited to React.

rc-tooltip

Rc-tooltip is a React component for tooltip functionality. It is part of the rc-components family and offers a simple API for creating and managing tooltips. While react-tooltip is more feature-rich and has a larger community, rc-tooltip is a good alternative for those already using other rc-components.

react-tippy

React-tippy is a React wrapper for Tippy.js, bringing its powerful tooltip capabilities to React applications. It combines the extensive features of Tippy.js with a React-friendly interface. React-tippy may be preferred by developers who want the advanced features of Tippy.js in a React-specific 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

:warning: ReactTooltip will inject the default styles into the page by default on version 5.13.0 or newer. The react-tooltip/dist/react-tooltip.css file is only for style reference and doesn't need to be imported manually anymore if you are already using v5.13.0 or upper.

:warning: 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.

: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.

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

If you are using a version older than v5.13.0 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. Version v5.13.0 or newer already inject the default styles into the page by default.

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>

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

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.

The tooltip is broken/not showing up

Make sure you've imported the default styling. You only need to do this once on your application and only if you are using a version before 5.13.0, App.jsx/App.tsx is usually a good place to do it.

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

If you've imported the default styling and the tooltip is still not showing up when you hover on your anchor element, make sure you have content to be displayed by the tooltip.

If data-tooltip-content and data-tooltip-html are both unset (or they have empty values) on the anchor element, and also the content, render, and children props on the tooltip are unset (or have empty values), the tooltip is not shown by default.

Next.js TypeError: f is not a function

This problem seems to be caused by a bug related to the SWC bundler used by Next.js. The best way to solve this is to upgrade to next@13.3.0 or later versions.

Less ideally, if you're unable to upgrade, you can set swcMinify: false on your next.config.js file.

Bad performance

If you're experiencing any kind of unexpected behavior or bad performance on your application when using ReactTooltip, here are a few things you can try.

Move <Tooltip /> on the DOM

This is specially relevant when using components that are conditionally rendered.

Always try to keep the <Tooltip /> component rendered, so if you're having issues with a tooltip you've placed inside a component which is placed/removed from the DOM dynamically, try to move the tooltip outside of it.

We usually recommend placing the tooltip component directly inside the root component of your application (usually on App.jsx/App.tsx).

Dynamically generated anchor elements

You should avoid needlessly using a large amount of <Tooltip /> components. One tooltip component that you use across your whole application should be good enough in most cases, but you should be fine to add a few more if you need to use different styled tooltips.

Here's a simple example on how to improve performance when using dynamically generated items.

Check the docs for examples for the anchorSelect and render props for more complex use cases.

// ❌ BAD
<div className="items-container">
  {myItems.map(({ id, content, tooltip }) => (
    <div key={id} className="item" data-tooltip-id={`tooltip-${id}`}>
      {content}
      <Tooltip id={`tooltip-${id}`} content={tooltip} />
    </div>
  ))}
</div>

// ✅ GOOD
<div className="items-container">
  {
    myItems.map(({ id, content, tooltip }) => (
      <div
        key={id}
        className="item"
        data-tooltip-id="my-tooltip"
        data-tooltip-content={tooltip}
      >
        {content}
      </div>
    ))
  }
</div>
<Tooltip id="my-tooltip" />

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