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';
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

nametyperequireddefaultvaluesdescription
data-tooltip-idstringfalseThe id set on the tooltip element (same as V4's data-for)
data-tooltip-contentstringfalseContent to de displayed in tooltip (html is priorized over content)
data-tooltip-htmlstringfalseHTML content to de displayed in tooltip
data-tooltip-placestringfalsetoptop right bottom leftPosition 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 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")

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

nametyperequireddefaultvaluesdescription
classNamestringnoClass name to customize tooltip element
classNameArrowstringnoClass name to customize tooltip arrow element
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 right bottom leftPosition 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")
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
styleCSSPropertiesnoa React inline styleAdd 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
isOpenboolennohandled 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