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';

<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';

<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"
/>
◕‿‿◕

Security note​

The html option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like sanitize-html. We chose not to include sanitization after discovering it increased our package size too much - we don't want to penalize people who don't use the html option.

JSX note​

You can use renderToStaticMarkup() function to use JSX instead of HTML. Example:

import ReactDOMServer from 'react-dom/server';
[...]
<a
  data-tooltip-id="my-tooltip"
  data-tooltip-html={ReactDOMServer.renderToStaticMarkup(<div>I am <b>JSX</b> content</div>)}
>
  ◕‿‿◕
</a>