| animation4.9.0+ | true | boolean |
Enables or disables the CSS fade transition for the React Tooltip. |
| className | - | string |
Adds a custom class name to the React Tooltip container. Useful for overriding default styles or applying additional design choices. |
| container4.11.0+ | document.body | Element, DocumentFragment, (() => Element | DocumentFragment | null), null |
Appends the React Tooltip to a specific element instead of the default document.body. You may pass: - A DOM element (HTMLElement or DocumentFragment) - A function that returns a single element - null |
| content | - | ReactNode |
Content to be displayed within the React Tooltip. Can be a string or any valid React node. |
| defaultShow6.0.0+ | - | boolean |
The initial visibility of an uncontrolled React Tooltip — read once on mount. |
| delay4.9.0+ | - | number, { show: number; hide: number; } |
The delay (in milliseconds) before showing or hiding the React Tooltip. - If provided as a number, the delay is applied to both "show" and "hide". - If provided as an object, it should have distinct "show" and "hide" values. |
| fallbackPlacements4.9.0+ | ['top', 'right', 'bottom', 'left'] | 'top', 'right', 'bottom', 'left', ('top', 'right', 'bottom', 'left')[] |
Array of fallback placements for the React Tooltip to use when the preferred placement cannot be achieved. These placements are tried in order. |
| floatingConfig5.5.0+ | - | Partial<ComputePositionConfig>, ((defaultFloatingConfig: Partial<ComputePositionConfig>) => Partial<ComputePositionConfig>) |
Customize the Floating UI configuration used to position the React Tooltip. Pass either an object or a function returning a modified config. [Learn more](https://floating-ui.com/docs/computePosition#options) |
| offset | [0, 6] | [number, number] |
Adjusts the offset of the React Tooltip relative to its target. Expects a tuple [x-axis, y-axis]. |
| onHidden6.0.0+ | - | (() => void) |
Callback fired when the React Tooltip has finished its exit transition. |
| onHide | - | (() => void) |
Callback fired when the React Tooltip starts hiding. |
| onShow | - | (() => void) |
Callback fired when the React Tooltip starts showing. |
| onShowChange6.0.0+ | - | ((show: boolean) => void) |
Callback fired when the React Tooltip requests a visibility change — a trigger gesture (hover, focus, click), the Escape key or, in uncontrolled mode, any internal toggle. In controlled mode update show yourself, or the tooltip stays as it is. |
| onShown6.0.0+ | - | (() => void) |
Callback fired when the React Tooltip has finished its entry transition. |
| placement | top | 'auto', 'top', 'bottom', 'right', 'left', 'end', 'start', (string & {}) |
Initial placement of the React Tooltip. Note that Floating UI middleware may alter this placement automatically if there's insufficient space in the chosen position. start and end are logical: they follow the reading direction, so end is the right side in LTR and the left side in RTL. left and right are their deprecated spellings and resolve identically. Breakpoint prefixes make it responsive: top md:end reads as top below md and end from md up. The breakpoints are the Sass ones — sm, md, lg, xl, 2xl. |
| show6.0.0+ | - | boolean |
Control the visibility. When set, the React Tooltip renders what show says (delays still apply as presentation) and trigger gestures only call onShowChange — nothing changes until the parent flips the prop. |
| trigger | ['hover', 'focus'] | 'hover', 'focus', 'click', ('hover' | 'focus' | 'click')[] |
Determines the events that toggle the visibility of the React Tooltip. Can be a single trigger or an array of triggers. |
| visibleDeprecated 6.0.0 | - | boolean |
Controls the visibility of the React Tooltip. - true to show the tooltip. - false to hide the tooltip. Use defaultShow / show / onShowChange instead — visible is ignored when either of them is set. |