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 🌟

---

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.

Bundle size comparison V4 -> V5

---

Installation

npm install react-tooltip

or

yarn add react-tooltip

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.

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