Skip to main content
Version: v6

HTML

Using rich markup content in ReactTooltip.

Raw HTML string APIs such as data-tooltip-html and the html prop are no longer part of the current API. Use tooltip children or the render prop instead so content stays in React rather than being injected as a string.

Using tooltip children​

import { Tooltip } from 'react-tooltip';

<a
  data-tooltip-id="my-tooltip-children-html"
>
  ◕‿‿◕
</a>
<Tooltip id="my-tooltip-children-html">
  <div>
    <h3>Cool stuff</h3>
    <ul>
      <li>This is cool</li>
      <li>This too</li>
    </ul>
  </div>
</Tooltip>

◕‿‿◕

Using render for dynamic rich content​

import { Tooltip } from 'react-tooltip';

<a data-tooltip-id="my-tooltip-render">◕‿‿◕</a>
<Tooltip
  id="my-tooltip-render"
  render={() => (
    <div>
      Hello
      <br />
      <s>multiline</s>
      <br />
      <b>markup</b>
      <br />
      tooltip
    </div>
  )}
/>
◕‿‿◕

Security note​

Avoid turning user-supplied strings into markup inside the tooltip. Prefer rendering React nodes directly with children or render.

JSX note​

If you already have JSX, pass it directly to the tooltip instead of converting it to a string.

<a data-tooltip-id="my-tooltip-jsx">◕‿‿◕</a>
<Tooltip id="my-tooltip-jsx">
  <div>
    I am <b>JSX</b> content
  </div>
</Tooltip>