Basic examples

Some basic examples of how to use the ReactTooltip component.

Data attributes

import { Tooltip } from 'react-tooltip';

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

◕‿‿◕◕‿‿◕

Props

Using anchor element id

import { Tooltip } from 'react-tooltip';

<a id="my-anchor-element">◕‿‿◕</a>
<Tooltip
  anchorSelect="#my-anchor-element"
  content="Hello world!"
/>

◕‿‿◕

Using anchor elements className

info

Check the Anchor select examples for more complex use cases.

import { Tooltip } from 'react-tooltip';

<a className="my-anchor-element">◕‿‿◕</a>
<a className="my-anchor-element">◕‿‿◕</a>
<Tooltip
  anchorSelect=".my-anchor-element"
  content="Hello world!"
/>

◕‿‿◕◕‿‿◕