## Tooltip
A short, transient hint shown on hover or focus of its trigger.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-tooltip> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings, audience.
Props:
- text: string, default —. The hint text shown in the bubble
- placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end', default top. Which side of the trigger the bubble + arrow sit on. The 4 cardinal values centre the bubble; the 8 edge-aligned values (…-start / …-end) align it to the trigger's start/end edge with the arrow offset near that edge (AntD naming)
- color: 'dark' | 'brand', default dark. Bubble fill: dark-navy #1A1A2E or brand color-primary #6A1EBB
- arrow: boolean, default true. Show the caret pointing at the trigger; arrow="false" hides it
- trigger: 'hover' | 'focus' | 'click', default hover. How it opens: hover+focus · focus only · click to toggle
- open: boolean, default false. Force the bubble visible (demos/tests); otherwise the trigger opens it
- help: boolean, default false. Render a built-in `?` help trigger — a focusable button carrying the DS <aha-icon name="system-question-mark"> (16px, muted → brand on hover/focus) — instead of requiring a slotted trigger. The settings-label help-glyph pattern; shows on focus as well as hover
Tokens: bg-dark, color-primary, text-inverse, radius-sm, font-product, motion-mid, ease-out, icon-muted, motion-fast, radius-pill.
Use when: Tooltip (a brief, non-essential hint — an icon-only button's name, a ? help elaboration); help text (a must-see consequence that is hard to undo — put it inline, not in a tooltip); Popover (richer content or interactive controls — a tooltip is text only).