Skip to main content

Children

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

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