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

Installation

npm install react-tooltip

Usage

Using NPM

1 . Require react-tooltip after installation

var ReactTooltip = require("react-tooltip")

2 . Add data-tip = "your placeholder" to your element

<p data-tip="hello world">Tooltip</p>

3 . Including react-tooltip component

<ReactTooltip />

Standalone

You can import node_modules/react-tooltip/standalone/react-tooltip.min.js into your page, please make sure that you have already imported react and react-dom into your page.

Options

Notes:

• The tooltip is using type: dark place: top effect: float as default attribute, you don't have to add these options if you don't want to change default
• The option you set on <ReactTooltip /> component will be implemented on every tooltip in a same page: <ReactTooltip effect="solid" />
• The option you set on specific elecment, for example: <a data-type="warning"></a> will only make effect on this specific tooltip

Check example: React-tooltip Test

Global  |	Specific	|	Type	|	Values  |       Description

:-----------|:-------------|:----------|:----------|:------------------ place | data-place | String | top, right, bottom, left | tooltip's placement type | data-type | String | success, warning, error, info, light | tooltip's color theme effect | data-effect | String | float, solid | either float or pinned event | data-event | String | e.g. click | customer event to trigger tooltip offset | data-offset | Object | top, right, bottom, left | data-offset="{'top': 10, 'left': 10}" for specific and offset={{top: 10, left: 10}} for global multiline | data-multiline | Bool | true, false | support <br>, <br /> to make multiline class | data-class | String | your custom class | extra custom class, can use !important to cover react-tooltip's default class html | data-html | Bool | true, false | <p data-tip="<p>HTML tooltip</p>" data-html={true}></p> or <ReactTooltip html={true} /> delayHide | data-delay-hide | Number | | <p data-tip="tooltip" data-delay-hide='1000'></p> or <ReactTooltip delayHide={1000} /> delayShow | data-delay-show | Number | | <p data-tip="tooltip" data-delay-show='1000'></p> or <ReactTooltip delayShow={1000} /> border | data-border | Bool | true, false | Add one pixel white border

Using react component as tooltip

Check the example React-tooltip Test

Note:

1. data-tip is necessary, because <ReactTooltip /> find tooltip via this attribute
2. data-for correspond to the id of <ReactTooltip />
3. When using react component as tooltip, you can have many <ReactTooltip /> in a page but they should have different id

Methods

ReactTooltip.hide() for hide the tooltip manually

ReactTooltup.rebuild() for re-bind tooltip to the corresponding element

I suggest always put <ReactTooltip /> in the Highest level or smart component of Redux, so you might need these static method to control tooltip's behaviour in some situations

License

MIT

Changelog

v1.1.2 (2016/02/15 12:31 +00:00)

• #79 Require the non-minified dist build in index (@idan)
• #73 Clear timeout when unmounting. (@joelburget)
• #72 clearing delayShowLoop-Timeout when component will unmount (@dsumer)