Skip to main content


Using children for setting the ReactTooltip content.

Using children as content

When using children as content, html and content props (and their respective data attributes) will take priority.

This is useful for setting a placeholder for the tooltip content.

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

<a data-tooltip-id="my-tooltip">◕‿‿◕</a>
<Tooltip id="my-tooltip">
<h3>This is a very interesting header</h3>
<p>Here's some interesting stuff:</p>