Skip to main content

Events

Events available in ReactTooltip component.

danger

This has been deprecated. Use the openOnClick tooltip prop instead.

Using hover​

info

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

import { Tooltip } from 'react-tooltip';
import 'react-tooltip/dist/react-tooltip.css';

<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';
import 'react-tooltip/dist/react-tooltip.css';

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