Options

All available data attributes for the anchor element and props for the tooltip component.

Data attributes

import { Tooltip } from 'react-tooltip';

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

◕‿‿◕

Available attributes

name	type	required	default	values	description
data-tooltip-id	string	false			The id set on the tooltip element (same as V4's data-for)
data-tooltip-content	string	false			Content to be displayed in the tooltip (html is priorized over content)
data-tooltip-html	string	false			HTML content to be displayed in tooltip
data-tooltip-place	string	false	top	top top-start top-end right right-start right-end bottom bottom-start bottom-end left left-start left-end	Position relative to the anchor element where the tooltip will be rendered (if possible)
data-tooltip-offset	number	false	10	any number	Space between the tooltip element and anchor element (arrow not included in the calculation)
data-tooltip-variant	string	false	dark	dark light success warning error info	Change the tooltip style with default presets
data-tooltip-wrapper	string	false	div	div span	Element wrapper for the tooltip container, can be div, span, p or any valid HTML tag
data-tooltip-events	string	false	hover	hover click hover click	Events to watch for when handling the tooltip state DEPRECATED Use openOnClick tooltip prop instead
data-tooltip-position-strategy	string	false	absolute	absolute fixed	The position strategy used for the tooltip. Set to fixed if you run into issues with overflow: hidden on the tooltip parent container
data-tooltip-delay-show	number	false		any number	The delay (in ms) before showing the tooltip
data-tooltip-delay-hide	number	false		any number	The delay (in ms) before hiding the tooltip
data-tooltip-float	boolean	false	false	true false	Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's effect="float")
data-tooltip-hidden	boolean	false	false	true false	Tooltip will not be shown
data-tooltip-class-name	string	false			Classnames for the tooltip container

Props

import { Tooltip } from 'react-tooltip';

<a id="my-anchor-element">◕‿‿◕</a>
<Tooltip
  anchorSelect="#my-anchor-element"
  content="Hello world!"
/>

◕‿‿◕

Available props

name	type	required	default	values	description
ref	Tooltip reference	no		React.useRef	Reference object which exposes internal state, and some methods for manually controlling the tooltip. See the examples.
className	string	no			Class name to customize tooltip element. You can also use the default class react-tooltip which is set internally
classNameArrow	string	no			Class name to customize tooltip arrow element. You can also use the default class react-tooltip-arrow which is set internally
content	string	no			Content to be displayed in tooltip (html prop is priorized over content)
html	string	no			HTML content to be displayed in tooltip DEPRECATED Use children or render instead
render	function	no			A function which receives a ref to the currently active anchor element and returns the content for the tooltip. Check the examples
place	string	no	top	top top-start top-end right right-start right-end bottom bottom-start bottom-end left left-start left-end	Position relative to the anchor element where the tooltip will be rendered (if possible)
offset	number	no	10	any number	Space between the tooltip element and anchor element (arrow not included in calculation)
id	string	no		any string	The tooltip id. Must be set when using data-tooltip-id on the anchor element
anchorId	string	no		any string	The id for the anchor element for the tooltip DEPRECATED Use data-tooltip-id or anchorSelect instead
anchorSelect	CSS selector	no		any valid CSS selector	The selector for the anchor elements. Check the examples for more details
variant	string	no	dark	dark light success warning error info	Change the tooltip style with default presets
wrapper	HTML tag	no	div	div span p ...	Element wrapper for the tooltip container, can be div, span, p or any valid HTML tag
children	React node	no	undefined	valid React children	The tooltip children have lower priority compared to the content prop and the data-tooltip-content attribute. Useful for setting default content
events	string[]	no	hover	hover click	Events to watch for when handling the tooltip state DEPRECATED Use openOnClick tooltip prop instead
openOnClick	boolean	no	false	true false	When enabled, the tooltip will open on click instead of on hover. Use openEvents, closeEvents, and globalCloseEvents for more customization
positionStrategy	string	no	absolute	absolute fixed	The position strategy used for the tooltip. Set to fixed if you run into issues with overflow: hidden on the tooltip parent container
delayShow	number	no		any number	The delay (in ms) before showing the tooltip
delayHide	number	no		any number	The delay (in ms) before hiding the tooltip
float	boolean	no	false	true false	Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's effect="float")
hidden	boolean	no	false	true false	Tooltip will not be shown
noArrow	boolean	no	false	true false	Tooltip arrow will not be shown
clickable	boolean	no	false	true false	Allow interaction with elements inside the tooltip. Useful when using buttons and inputs
closeOnEsc	boolean	no	false	true false	Pressing escape key will close the tooltip DEPRECATED Use globalCloseEvents instead.
closeOnScroll	boolean	no	false	true false	Scrolling will close the tooltip DEPRECATED Use globalCloseEvents instead.
closeOnResize	boolean	no	false	true false	Resizing the window will close the tooltip DEPRECATED Use globalCloseEvents instead.
openEvents	Record<string, boolean>	no	mouseenter focus	mouseenter focus click dblclick mousedown	Events to be listened on the anchor elements to open the tooltip
closeEvents	Record<string, boolean>	no	mouseleave blur	mouseleave blur click dblclick mouseup	Events to be listened on the anchor elements to close the tooltip
globalCloseEvents	Record<string, boolean>	no		escape scroll resize clickOutsideAnchor	Global events to be listened to close the tooltip (escape closes on pressing ESC, clickOutsideAnchor is useful with click events on openEvents)
imperativeModeOnly	boolean	no	false	true false	When enabled, default tooltip behavior is disabled. Check the examples for more details
style	CSSProperties	no		a CSS style object	Add inline styles directly to the tooltip
position	{ x: number; y: number }	no		any number value for both x and y	Override the tooltip position on the DOM
isOpen	boolean	no		true false	The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip (can be used without setIsOpen)
defaultIsOpen	boolean	no	false	true false	It determines the initial visibility of the tooltip. If true, the tooltip is shown by default, if false or not provided then it's in hidden state by default.
setIsOpen	function	no			The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip
afterShow	function	no			A function to be called after the tooltip is shown
afterHide	function	no			A function to be called after the tooltip is hidden
middlewares	Middleware[]	no		array of valid floating-ui middlewares	Allows for advanced customization. Check the floating-ui docs for more information
border	CSS border	no		a CSS border style	Change the style of the tooltip border (including the arrow)
opacity	CSS opacity	no	0.9	a CSS opacity value	Change the opacity of the tooltip
arrowColor	CSS color	no		a CSS background color	Change color of the tooltip arrow
disableStyleInjection	boolean or 'core'	no	false	true false 'core'	Whether to disable automatic style injection. Do not set dynamically. Check the styling page for more details
role	React.AriaRole	no	tooltip	'tooltip' 'dialog'	Set ARIA role, either tooltip or dialog if the tooltip should contain focusable elements