Koala UIToggletip
Extra information behind an info button that works on every input. A pointer that can hover gets it as a tooltip; a click or a tap pins it open; Escape or a tap outside closes it.
Monthly active users
Installation#
Usage#
import { Toggletip } from "@/components/ui/toggletip"
export function Example() {
return <Toggletip content="People who opened the app in the last 30 days." />
}Anatomy#
import { Toggletip } from "@/components/ui/toggletip"
<Toggletip content="..." />
<Toggletip content="...">
<button />
</Toggletip>Tooltip or Toggletip#
Touch has no hover, so a Tooltip never opens from a tap. That is right for the name of an icon-only button, which already has an aria-label and whose tap runs it. It is wrong for help behind an info icon, which a touch user needs as much as anyone. That help is a Toggletip: its button does nothing but open it, so a tap can. Anything a person must read before acting goes on screen instead, and anything with buttons is a Popover.
Beside a field label#
info on a FieldLabel renders a small Toggletip right after the label, outside the <label> so it neither joins the label's name nor focuses the input. The same text still describes the input for screen readers.
With a title and a link#
Custom trigger#
Sizes#
Side#
API reference#
Toggletip
An info button and the bubble it opens, built on Popover (Radix). The bubble looks like a Tooltip; unlike one, it opens on a tap, stays until dismissed and can hold one link. Accepts className, merged last onto the bubble.
| Prop | Type | Default | Description |
|---|---|---|---|
| content* | ReactNode | - | What the bubble says. One or two sentences and at most one link: anything with buttons or a form is a Popover. |
| children | ReactElement | - | A custom trigger, which must be a button (it receives the open state, aria-expanded and the handlers). Defaults to an info button. |
| label | string | "More information" | Accessible name of the default info button. Name what it explains when there are several on screen. |
| variant | "text" | "graph" | "text" | text is the inverted chip of a text Tooltip; graph is the popover card, for a title plus a description. |
| size | "sm" | "md" | "md" | The default button's glyph: sm (14px) inline with a label, md (16px) beside a title. Either way the target reaches 40px; sm grows sideways so it never covers the control under a label. |
| side | "top" | "right" | "bottom" | "left" | "top" | Preferred side; it flips when there is no room. |
| align | "start" | "center" | "end" | "center" | Alignment against the trigger. |
| open | boolean | - | Controlled open state. |
| defaultOpen | boolean | false | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | - | Called when it opens or closes. |
| triggerClassName | string | - | Classes merged onto the default info button. |
| Data attribute | Description |
|---|---|
| data-state | open or closed on the trigger and the bubble. |
| data-variant | text or graph on the bubble. |
| CSS variable | Description |
|---|---|
| --surface | Set on the bubble to its own ground, as on Tooltip, so nested parts blend with it. |