Options

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

Data attributes

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

<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 de displayed in tooltip (html is priorized over content)
data-tooltip-html	string	false			HTML content to de displayed in tooltip
data-tooltip-place	string	false	top	top right bottom left	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 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")

Props

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

<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
classNameArrow	string	no			Class name to customize tooltip arrow element
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 right bottom left	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")
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
style	CSSProperties	no		a React inline style	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	boolen	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