Skip to main content
Version: v6

Events

Events available in ReactTooltip component.

danger

This has been deprecated. Use openOnClick, or openEvents, closeEvents, and globalCloseEvents instead.

See the options page for more details.

Hover (default)​

info

Hover is the default behavior. No extra props are needed.

import { Tooltip } from 'react-tooltip';

<a data-tooltip-id="my-tooltip"> ◕‿‿◕ </a>
<Tooltip
  id="my-tooltip"
  content="Hello world!"
/>
◕‿‿◕

Click to open​

info

Clicking anywhere outside the anchor element will close the tooltip.

import { Tooltip } from 'react-tooltip';

<a data-tooltip-id="my-tooltip-click"> ◕‿‿◕ </a>
<Tooltip
  id="my-tooltip-click"
  content="Hello world!"
  openOnClick
/>
◕‿‿◕