Skip to main content

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}
/>
◕‿‿◕◕‿‿◕◕‿‿◕◕‿‿◕◕‿‿◕◕‿‿◕