Toggletip
A click-triggered info popover for supplementary, selectable content
Category: overlay · WCAG 2.2-AA · overlay, toggletip, info, popover, floating
States
- open
- closed
Props
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | ReactNode | — | Trigger content, rendered inside a button (e.g. an info icon) |
children | ReactNode | — | The popover content — interactive and selectable |
placement | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'top' | Side and alignment of the bubble relative to the trigger |
defaultOpen | boolean | false | Initial open state when uncontrolled |
open | boolean | — | Controlled open state |
onOpenChange | (open: boolean) => void | — | Called whenever the open state should change |
labels | { label?: string } | — | Override the trigger accessible name |
Design tokens
--cascivo-color-surface--cascivo-color-border--cascivo-color-text--cascivo-color-bg-subtle--cascivo-radius-control--cascivo-radius-overlay--cascivo-shadow-md--cascivo-focus-ring--cascivo-motion-enter--cascivo-z-tooltip
When to use
- Revealing brief supplementary information on demand when the user clicks an info affordance
- Content that must be selectable or contain a link, where a hover Tooltip would be unreachable
- Touch-friendly hint surfaces where hover is unavailable
When not to use
- A passive label that should appear on hover/focus without a click — use Tooltip
- A blocking, focus-trapping dialog for a task — use Modal
- Rich forms or pickers anchored to a trigger — use Popover
- A list of one-shot actions behind a button — use MenuButton
How to build an accessible Toggletip in React →
Examples
Info toggletip
An info button that reveals supplementary text on click
<Toggletip trigger={<InfoIcon />}>
Your password must contain at least 12 characters.
</Toggletip>Controlled
Drive the open state from the parent
<Toggletip
trigger={<InfoIcon />}
open={open}
onOpenChange={setOpen}
placement="bottom-start"
>
<a href="/docs">Learn more</a>
</Toggletip>Related components
- Tooltip — Use Tooltip for non-interactive hints shown on hover/focus rather than click
- Popover — Use Popover for richer interactive content like forms or pickers
- MenuButton — Use MenuButton when the trigger should reveal a list of actions