Skip to main content

Multiline

Multiline content in ReactTooltip component.

Using data-tooltip-html​

info

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

import { Tooltip } from 'react-tooltip';

<a
  data-tooltip-id="my-tooltip-multiline"
  data-tooltip-html="Hello<br />some stuff in between<br />world!"
>
  ◕‿‿◕
</a>
<Tooltip id="my-tooltip-multiline" />
◕‿‿◕

Using tooltip children and JSX​

import { Tooltip } from 'react-tooltip';

<a data-tooltip-id="my-tooltip-children-multiline"> ◕‿‿◕ </a>
<Tooltip id="my-tooltip-children-multiline">
  <div style={{ display: 'flex', flexDirection: 'column' }}>
    <span>Hello</span>
    <span>some stuff in between</span>
    <span>world!</span>
  </div>
</Tooltip>
◕‿‿◕