Toggletip
A small button that shows a short explanation when clicked. Use it next to a label, a table header or a setting whose meaning isn't obvious; it works with touch, keyboard and screen readers.
Installation
Set up Camaleo once (Installation), then import what you need. It renders on the client.
import { Toggletip, ToggletipTrigger, ToggletipContent, ToggletipTitle, ToggletipDescription, ToggletipClose } from "@camaleo/react";Anatomy
The trigger is a round button (toggletip-trigger). The tip renders in a portal, wrapped in a scope that keeps the skin, mode and brand of the page around the button.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above. Click a "?" button, or Tab to it and press Enter.
Which one? A Tooltip names a control in a few words, on hover. A HoverCard previews where a link goes, on hover. A Toggletip explains a term on click, so it is the one that works on touch and that screen readers read.
Next to a field label
Put the button after the label, not inside it, so the field's name stays "Billing email" and the help is one click away.
| Month | Churn |
|---|---|
| August 2026 | 2.4% |
| September 2026 | 1.9% |
In a table header
Explain how a metric is calculated without a footnote. align="end" keeps the tip inside a right-aligned column.
In a settings row
Say what a switch really does, with the date or the amount, before people turn it on.
- Interest rate
- Total cost (APR)
Named after the topic
Each button says "More about …" and the topic. In a screen reader's list of buttons, five plain "Info" buttons are impossible to tell apart.
With a link inside
Open it with the keyboard: focus goes to the tip and Tab reaches the link, so it works without a mouse. One link at most, to the full explanation.
Title and close button
Click it. The title names the tip for screen readers, and ToggletipClose gives touch users a clear way out. Pass a translated aria-label.
Alignment
align lines the tip up with the start, center or end of the button. side picks the side it opens on; it flips when there is no room.
In context
Toggletips explain terms right where people meet them. These are whole pieces of UI you can copy, in the skin you picked.
| Feature | Basic | Pro |
|---|---|---|
| Team seats | 3 | 15 |
| Pix transfers a month | 300 | Unlimited |
| API access | — | Included |
Simulate a loan
Security
Guidelines
It opens on a click or a tap, so phones, keyboards and screen readers all get the text.
It needs hover or focus, so it never opens on a phone, and screen readers skip it.
Enough to understand the term and carry on filling the form.
Three paragraphs don't fit a small box. Write it on the page, or link to a help article.
Props
Toggletip takes open, onOpenChange and defaultOpen. ToggletipTrigger needs an aria-label such as "More about the interest rate". ToggletipClose takes aria-label (default "Close tip"; translate it).
Styling hooks
Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the tip itself.
Attributes
Tokens it reads
Color
Shape & size
Type & motion
This component only
Accessibility
- Focus moves into the tip when it opens, so screen readers read it: a region named by its title and described by its text. It isn't a live region, so nothing is announced while focus stays elsewhere.
- The button has no visible text. Give it an aria-label that names the topic, such as "More about the interest rate". Without a ToggletipTitle, pass aria-label to ToggletipContent too.
- A click or tap outside closes it, and the rest of the page stays usable: it isn't a dialog, so the button reports aria-expanded but no aria-haspopup.
- Focus lands on the tip itself, so screen readers read the explanation before any link or close button inside. Keep to one link, and keep the text short.