Skip to main content

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

nametyperequireddefaultvaluesdescription
data-tooltip-idstringfalseThe id set on the tooltip element (same as V4's data-for)
data-tooltip-contentstringfalseContent to be displayed in the tooltip (html is priorized over content)
data-tooltip-htmlstringfalseHTML content to be displayed in tooltip
data-tooltip-placestringfalsetoptop top-start top-end right right-start right-end bottom bottom-start bottom-end left left-start left-endPosition relative to the anchor element where the tooltip will be rendered (if possible)
data-tooltip-offsetnumberfalse10any numberSpace between the tooltip element and anchor element (arrow not included in the calculation)
data-tooltip-variantstringfalsedarkdark light success warning error infoChange the tooltip style with default presets
data-tooltip-wrapperstringfalsedivdiv spanElement wrapper for the tooltip container, can be div, span, p or any valid HTML tag
data-tooltip-eventsstringfalsehoverhover click hover clickEvents to watch for when handling the tooltip state
DEPRECATED
Use openOnClick tooltip prop instead
data-tooltip-position-strategystringfalseabsoluteabsolute fixedThe 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-shownumberfalseany numberThe delay (in ms) before showing the tooltip
data-tooltip-delay-hidenumberfalseany numberThe delay (in ms) before hiding the tooltip
data-tooltip-floatbooleanfalsefalsetrue falseTooltip will follow the mouse position when it moves inside the anchor element (same as V4's effect="float")
data-tooltip-hiddenbooleanfalsefalsetrue falseTooltip 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

nametyperequireddefaultvaluesdescription
classNamestringnoClass name to customize tooltip element. You can also use the default class react-tooltip which is set internally
classNameArrowstringnoClass name to customize tooltip arrow element. You can also use the default class react-tooltip-arrow which is set internally
contentstringnoContent to de displayed in tooltip (html prop is priorized over content)
htmlstringnoHTML content to de displayed in tooltip
DEPRECATED
Use children or render instead
renderfunctionnoA function which receives a ref to the currently active anchor element and returns the content for the tooltip. Check the examples
placestringnotoptop top-start top-end right right-start right-end bottom bottom-start bottom-end left left-start left-endPosition relative to the anchor element where the tooltip will be rendered (if possible)
offsetnumberno10any numberSpace between the tooltip element and anchor element (arrow not included in calculation)
idstringnoany stringThe tooltip id. Must be set when using data-tooltip-id on the anchor element
anchorIdstringnoany stringThe id for the anchor element for the tooltip
DEPRECATED
Use data-tooltip-id or anchorSelect instead
anchorSelectCSS selectornoany valid CSS selectorThe selector for the anchor elements. Check the examples for more details
variantstringnodarkdark light success warning error infoChange the tooltip style with default presets
wrapperHTML tagnodivdiv span p ...Element wrapper for the tooltip container, can be div, span, p or any valid HTML tag
childrenReact nodenoundefinedvalid React childrenThe tooltip children have lower priority compared to the content prop and the data-tooltip-content attribute. Useful for setting default content
eventsstring[]nohoverhover clickEvents to watch for when handling the tooltip state
DEPRECATED
Use openOnClick tooltip prop instead
openOnClickbooleannofalsetrue falseControls whether the tooltip should open when clicking (true) or hovering (false) the anchor element
positionStrategystringnoabsoluteabsolute fixedThe position strategy used for the tooltip. Set to fixed if you run into issues with overflow: hidden on the tooltip parent container
delayShownumbernoany numberThe delay (in ms) before showing the tooltip
delayHidenumbernoany numberThe delay (in ms) before hiding the tooltip
floatbooleannofalsetrue falseTooltip will follow the mouse position when it moves inside the anchor element (same as V4's effect="float")
hiddenbooleannofalsetrue falseTooltip will not be shown
noArrowbooleannofalsetrue falseTooltip arrow will not be shown
clickablebooleannofalsetrue falseAllow interaction with elements inside the tooltip. Useful when using buttons and inputs
closeOnEscbooleannofalsetrue falsePressing escape key will close the tooltip
closeOnScrollbooleannofalsetrue falseScrolling will close the tooltip (for this to work, scroll element must be either the root html tag, the tooltip parent, or the anchor parent)
closeOnResizebooleannofalsetrue falseResizing the window will close the tooltip
styleCSSPropertiesnoa CSS style objectAdd inline styles directly to the tooltip
position{ x: number; y: number }noany number value for both x and yOverride the tooltip position on the DOM
isOpenbooleannohandled by internal statetrue falseThe tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip (can be used without setIsOpen)
setIsOpenfunctionnoThe tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip
afterShowfunctionnoA function to be called after the tooltip is shown
afterHidefunctionnoA function to be called after the tooltip is hidden
middlewaresMiddleware[]noarray of valid floating-ui middlewaresAllows for advanced customization. Check the floating-ui docs for more information
borderCSSProperties['border']noa CSS border styleChange the style of the tooltip border (including the arrow)
opacityCSSProperties['opacity']no0.9a CSS opacity valueChange the opacity of the tooltip
arrowColorCSSProperties['backgroundColor']noa CSS background colorChange color of the tooltip arrow
disableStyleInjection
boolean | 'core'
nofalsetrue false 'core'Whether to disable automatic style injection. Do not set dynamically. Check the styling page for more details