Skip to main content

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