Skip to main content

HTML

Using HTML content in ReactTooltip component.

Using data-tooltip-html attribute​

info

You can also use renderToStaticMarkup() to render HTML/JSX.

import { Tooltip } from 'react-tooltip';
import 'react-tooltip/dist/react-tooltip.css';

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

Using html prop​

info

You should probably pass the content as children to the tooltip instead.

import { Tooltip } from 'react-tooltip';
import 'react-tooltip/dist/react-tooltip.css';

<a data-tooltip-id="my-tooltip-html-prop">◕‿‿◕</a>
<Tooltip 
  id="my-tooltip-html-prop"
  html="Hello<br /><s>multiline</s><br /><b>HTML</b><br />tooltip"
/>
◕‿‿◕