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

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
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 de displayed in tooltip (html prop is priorized over content)
html	string	no			HTML content to de 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	Controls whether the tooltip should open when clicking (true) or hovering (false) the anchor element
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
closeOnScroll	boolean	no	false	true false	Scrolling will close the tooltip (for this to work, scroll element must be either the root html tag, the tooltip parent, or the anchor parent)
closeOnResize	boolean	no	false	true false	Resizing the window will close the tooltip
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	handled by internal state	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)
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	CSSProperties['border']	no		a CSS border style	Change the style of the tooltip border (including the arrow)
opacity	CSSProperties['opacity']	no	0.9	a CSS opacity value	Change the opacity of the tooltip
arrowColor	CSSProperties['backgroundColor']	no		a CSS background color	Change color of the tooltip arrow
disableStyleInjection	boolean | 'core'	no	false	true false 'core'	Whether to disable automatic style injection. Do not set dynamically. Check the styling page for more details