Skip to main content

Offset

Offset option for the ReactTooltip component.

Using data-tooltip-offset attribute​

import { Tooltip } from 'react-tooltip';

<a data-tooltip-id="my-tooltip" data-tooltip-offset={10}>◕‿‿◕</a>
<a data-tooltip-id="my-tooltip" data-tooltip-offset={20}>◕‿‿◕</a>
<a data-tooltip-id="my-tooltip" data-tooltip-offset={30}>◕‿‿◕</a>
<a data-tooltip-id="my-tooltip" data-tooltip-offset={40}>◕‿‿◕</a>
<a data-tooltip-id="my-tooltip" data-tooltip-offset={50}>◕‿‿◕</a>
<Tooltip id="my-tooltip" content="Hello world!" />
◕‿‿◕◕‿‿◕◕‿‿◕◕‿‿◕◕‿‿◕

Using offset tooltip prop​

import { Tooltip } from 'react-tooltip';

<a data-tooltip-id="my-tooltip-offset-prop">◕‿‿◕</a>
<Tooltip
  id="my-tooltip-offset-prop"
  content="Hello world!"
  offset={30}
/>
◕‿‿◕