Tooltip
A short label that appears when people hover or focus a control. Use it to name icon buttons and show shortcuts, never for information people need.
Installation
Set up Camaleo once (Installation), then import what you need. It renders on the client.
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@camaleo/react";Anatomy
A trigger and a popup with an arrow. The popup renders in a portal, so a parent with overflow: hidden doesn't cut it.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above. Screen readers don't read the tooltip, so on an icon button the aria-label must say exactly what the tooltip says.
Same text as the label
The tooltip shows sighted people the name a screen reader hears. Write it once and use it for both aria-label and the tooltip.
With a shortcut
Add a Kbd to teach the shortcut, and aria-keyshortcuts on the trigger so screen reader users learn it too.
Sides
Point the tooltip where the action goes: up for "Move up", right for "Next". If there is no room, it flips to the other side.
Shared delay in a toolbar
Hover one button, then slide to the next. One TooltipProvider around the group waits for the first tooltip only, so the rest open right away.
Copy, then confirm
Click it. The tooltip changes to "Copied" for people who see it, and a hidden status message says "Link copied" to screen readers.
On a disabled button
A disabled button gets no hover or focus, so its tooltip never opens. Use focusableWhenDisabled and link the reason with aria-describedby.
Full text of a cut-off name
Show the full file name when it doesn't fit. Keep the whole name in the link text, so screen readers read it.
In context
Tooltips name the buttons that only have an icon. These are whole pieces of UI you can copy, in the skin you picked.
Release notes
export const config = {
theme: "auto",
brand: "#3fa34d"
};Guidelines
"Save changes" reads at a glance and is exactly what the screen reader says.
It closes as soon as the pointer leaves, and keyboard users can't reach it. Use a popover instead.
People learn it at the moment they use the action, without a help page.
On a phone there is no hover, and screen readers don't read it. Put password rules in the field's description.
Props
TooltipProvider takes delay (ms before the first tooltip opens, default 600) and closeDelay (ms before it closes). TooltipTrigger takes the same two for a single tooltip, and Tooltip takes disabled, open and onOpenChange.
Styling hooks
Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the popup itself.
Attributes
Tokens it reads
Color
Shape & size
Type & motion
This component only
Accessibility
- Screen readers don't read the tooltip: nothing links it to the trigger. On an icon button, the aria-label must be the tooltip's text, word for word.
- Anything people need to know goes in the page, not only in a tooltip. Touch screens have no hover, so the tooltip never opens there.
- Disabled buttons get no hover or focus. Keep them focusable with focusableWhenDisabled, or say the reason next to the button.
- The pointer can move onto the tooltip without closing it, as WCAG 1.4.13 asks.