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