Avala Design
← Components/primitives

Toggletip

Carbon's Toggletip, re-implemented on Radix Popover. Like Tooltip but click- or focus-triggered, persistent (doesn't close on pointer-leave), and may hold rich content (icons, links, code).

primitivesstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent } from "@avala/design";

<Toggletip>
  <ToggletipActions />
  <ToggletipButton />
  <ToggletipContent />
</Toggletip>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-toggletip--defaultOpen in Storybook →

When to use

  • Hint copy that needs to stay open while the user reads (longer than a tooltip).
  • Help content that contains a link, code snippet, or inline action.
  • Pointer-stable hints — Tooltip auto-dismisses on pointer-leave, which is unfriendly for users on touch input or dwelling to read.
  • Form-field help when the explanation is too long for helper-text.

When not to use

  • Short plain-text hints (≤ 1 sentence) → use `Tooltip`. It's lighter and auto-dismisses.
  • A real menu of actions → use `DropdownMenu`.
  • A primary-action confirm flow → use `AlertDialog`.