Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Dependencies
- @radix-ui/react-tooltip (opens in a new tab) - Tooltip primitive
Usage
Placement
Tooltips can be placed differently.
No Delay
To show the tooltip immediately, set the delayDuration prop to 0 to the TooltipContent component.
Custom Delay
Tooltips have a default delay of 100ms. This can be changed by setting the delayDuration prop to a number in milliseconds to the TooltipContent component.
With Arrow
Tooltip can have an arrow with <TooltipArrow /> component
Examples
With Supporting Text
Use supporting text to provide additional context to the tooltip.
On Icon
Use tooltips on icons to provide additional context.
API Reference
To see the full API of Tooltip component go to Radix Docs (opens in a new tab).