Skip to main content

Getting Started

This docs is related to V5, if you are using V4 please check here.

A react tooltip is a floating react element that displays information related to an anchor element when it receives keyboard focus or the mouse hovers over it.

Installation​

npm install react-tooltip

or

yarn add react-tooltip

Usage​

info

If you've been using V5 for a while, you'll notice we've deprecated the anchorId prop in favor of the data-tooltip-id attribute, or the anchorSelect prop. For more info and more complex use cases using anchorSelect, check the examples.

Set the default styling​

caution

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. We suggest you do it on your src/index.js or equivalent file. For advanced styling, check the examples.

There are two ways to use ReactTooltip.

  1. Using props into ReactTooltip Element.
  2. Using data-attributes on anchor element.

Using anchor data attributes​

1 . Import react-tooltip after installation.

import { Tooltip } from 'react-tooltip'

2 . Add data-tooltip-id="<tooltip id>", data-tooltip-content="<your placeholder>" and other attributes to your elements.

info

Click here the full list of available data attributes.

<a 
  data-tooltip-id="my-tooltip" 
  data-tooltip-content="Hello world!" 
  data-tooltip-place="top"
>
  ◕‿‿◕
</a>
<a data-tooltip-id="my-tooltip" data-tooltip-content="Hello to you too!">
  ◕‿‿◕
</a>

3 . Create <Tooltip /> element and set the id prop.

caution

Don't forget to set the tooltip id, or it will not work!

<Tooltip id="my-tooltip" />
◕‿‿◕◕‿‿◕

Using ReactTooltip props​

1 . Import react-tooltip after installation.

import { Tooltip } from 'react-tooltip'

2 . Create anchor elements.

<a className="my-anchor-element">◕‿‿◕</p>
<a className="my-anchor-element">◕‿‿◕</p>
<a className="my-anchor-element">◕‿‿◕</p>

3 . Create <Tooltip /> element and set the anchorSelect prop.

caution

anchorSelect must be a valid CSS selector. Click here for more info.

info

Click here the full list of available tooltip props.

<Tooltip anchorSelect=".my-anchor-element" place="top">
  Hello world!
</Tooltip>
◕‿‿◕◕‿‿◕◕‿‿◕

Clickable tooltip​

By default, you can't interact with elements inside the tooltip. To allow for proper usage of elements such as buttons and inputs, use the clickable prop.

<a id="not-clickable">◕‿‿◕</a>
<Tooltip anchorSelect="#not-clickable">
  <button>You can't click me :(</button>
</Tooltip>
<a id="clickable">◕‿‿◕</a>
<Tooltip anchorSelect="#clickable" clickable>
  <button>You can click me!</button>
</Tooltip>
◕‿‿◕◕‿‿◕

Styling​

Basic styling can be done by overriding the following css variables. For advanced styling, check the examples.

:root {
  --rt-color-white: #fff;
  --rt-color-dark: #222;
  --rt-color-success: #8dc572;
  --rt-color-error: #be6464;
  --rt-color-warning: #f0ad4e;
  --rt-color-info: #337ab7;
  --rt-opacity: 0.9;
}