C
Storybook
08Shipped

Tooltip

Short contextual help. Use for supplemental info, not primary instructions.

Import

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@charply/design"

Variants

Basic tooltip

Guidelines

docs/design/components/tooltip.md

Do

  • ✓Use for supplemental info on icon buttons and truncated labels.
  • ✓Keep tooltip copy to one short sentence.

Don't

  • ✗Use a tooltip to convey critical information — users can miss hover states.
  • ✗Put interactive elements (buttons, links) inside `TooltipContent`.
  • ✗Repeat what the visible label already says.
  • ✗---

See all variants and interactive states in Storybook. Run npm run storybook to open the workbench.