Tooltip
A tooltip displays a description of an element on hover or focus.
Example
Features
The HTML title attribute can be used to create a tooltip, but it cannot be styled. Custom styled tooltips can be hard to build in an accessible way. TooltipTrigger and Tooltip help build fully accessible tooltips that can be styled as needed.
- Styleable – States for entry and exit animations are included for easy styling, and an optional arrow element can be rendered.
- Accessible – The trigger element is automatically associated with the tooltip via
aria-describedby. Tooltips are displayed when an element receives focus. - Hover behavior – Tooltips display after a global delay on hover of the first tooltip, with no delay on subsequent tooltips to avoid unintended flickering. Emulated hover events on touch devices are ignored.
- Positioning – The tooltip is positioned relative to the trigger element, and automatically flips and adjusts to avoid overlapping with the edge of the browser window.
Installation
Button. Make sure you have installed and configured it before using this component.Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Copy and paste the following code into your project.
npx @libravelui@latest add tooltipAnatomy
[ANATOMY IMPORT HERE][ANATOMY CODE]Another Examples
Placements
The list above shows the primary directions, but you can also use more specific placements like bottom left or top right. Here are all the available placement options:
| Primary Direction | Placement |
|---|---|
bottom | bottom, bottom left, bottom right, bottom start, bottom end |
top | top, top left, top right, top start, top end |
left | left, left top, left bottom |
start | start, start top, start bottom |
right | right, right top, right bottom |
end | end, end top, end bottom |
Tones
Show different visual styles for tooltips, such as subtle, solid, or outlined, to match various interface themes and design preferences.
Without Arrow
Display tooltips without the directional arrow for a cleaner, more minimal appearance while still providing helpful context.
Delay
Control the display timing of tooltips by adding a delay before they appear or disappear, improving usability and preventing accidental triggers.
Props
Loading types…