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

If you are using a version before than v5.13.0, you must import the CSS file or the tooltip won't show!

info

If you are using v5.13.0 or newer, you don't need to import the css file manually, the styles will be injected into the page by default.

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">◕‿‿◕</a>
<a className="my-anchor-element">◕‿‿◕</a>
<a className="my-anchor-element">◕‿‿◕</a>

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;
  --rt-transition-show-delay: 0.15s;
  --rt-transition-closing-delay: 0.15s;
}