Skip to main content
Version: v5

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.

Using hover​

info

This is the default event option, so it doesn't have to be manually set.

import { Tooltip } from 'react-tooltip';

<a data-tooltip-id="my-tooltip"> ◕‿‿◕ </a>
<Tooltip
  id="my-tooltip"
  content="Hello world!"
  events={['hover']}
/>
◕‿‿◕

Using click​

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!"
  events={['click']}
/>
◕‿‿◕