State

Controlled state example for the ReactTooltip component.

Controlled tooltip state

caution

Most of the time, leaving the state to be handled internally will be enough.

Only do this if you need some more complex behavior.

This is a very simple example in which hovering over any anchor element opens the tooltip, but it can only be closed by clicking the last anchor.

It is just a demonstration, and you can come up with use cases as complex as you can imagine.

import { useState } from 'react';
import { Tooltip } from 'react-tooltip';

const [isOpen, setIsOpen] = useState(false)

<a data-tooltip-id="my-tooltip" onMouseEnter={() => setIsOpen(true)}>
  ◕‿‿◕
</a>
<a data-tooltip-id="my-tooltip" onMouseEnter={() => setIsOpen(true)}>
  ◕‿‿◕
</a>
<a data-tooltip-id="my-tooltip" onMouseEnter={() => setIsOpen(true)}>
  ◕‿‿◕
</a>
<a data-tooltip-id="my-tooltip" onMouseEnter={() => setIsOpen(true)}>
  ◕‿‿◕
</a>
<a data-tooltip-id="my-tooltip" onMouseEnter={() => setIsOpen(true)}>
  ◕‿‿◕
</a>
<a
  data-tooltip-id="my-tooltip"
  data-tooltip-content="Click me!"
  onMouseEnter={() => setIsOpen(true)}
  onClick={() => setIsOpen(false)}
>
  ◕‿‿◕
</a>
<Tooltip
  id="my-tooltip"
  content="Hello world!"
  isOpen={isOpen}
/>

◕‿‿◕◕‿‿◕◕‿‿◕◕‿‿◕◕‿‿◕◕‿‿◕