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