Tooltip components
FREEFree and open-source React tooltip components built for modern applications and websites. These tooltips are built using React Aria and styled with Tailwind CSS.
Installation
You can add this Tooltip component using our CLI or manually:
npx untitledui add tooltip
Tooltip examples
Below are examples and variations of this tooltip component:
Default
Tooltips are used to display additional information when hovering over an element. This is how our tooltip component looks by default:
With arrow
You can add an arrow to the tooltip by passing the arrow boolean prop to the Tooltip component. This will add an arrow to the tooltip that points to the element being hovered over.
With supporting text
In situations where you want to provide more context for the tooltip, you can pass a description to the Tooltip component. This will display the description below the tooltip title.
Placements
Since our tooltip component is built with React Aria, it supports all the placements that React Aria supports. You can set the placement using the placement prop on the Tooltip component. To see the full list of placements, check out the tooltip props in the React Aria documentation.