Skip to main content
Version: v6

Multiline

Multiline content in ReactTooltip component.

Using tooltip children​

import { Tooltip } from 'react-tooltip';

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

◕‿‿◕

Using render for multiline content​

import { Tooltip } from 'react-tooltip';

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