# Tooltip
> Generated from tooltip.contract.json — do not edit by hand.

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.

Surfaces: editor, dashboard, settings, audience.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `text` | string | `—` | 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' | `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' | `dark` | Bubble fill: dark-navy #1A1A2E or brand color-primary #6A1EBB |
| `arrow` | boolean | `true` | Show the caret pointing at the trigger; arrow="false" hides it |
| `trigger` | 'hover' | 'focus' | 'click' | `hover` | How it opens: hover+focus · focus only · click to toggle |
| `open` | boolean | `false` | Force the bubble visible (demos/tests); otherwise the trigger opens it |
| `help` | boolean | `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 |

## Visual standard (measured)
- Bubble: dark-navy #1A1A2E (or brand #6A1EBB), white text, radius 6, padding 6 10
- Text: Plus Jakarta 12/18
- Arrow: anchored to the trigger, matches the fill; `arrow=false` hides it
- Placement: top (default) · bottom · left · right centred, PLUS 8 edge-aligned (top-start/-end, bottom-start/-end, left-start/-end, right-start/-end) — same side, aligned to the trigger edge with the arrow offset near it
- Trigger: hover + focus (default) · focus · click (toggle, Esc/click-away to close); `open` forces it visible
- Help: `help` renders a built-in `?` trigger — a DS <aha-icon name="system-question-mark"> at 16px, muted (--aha-icon-muted #8A8A8A) → brand (#6A1EBB) on hover/focus — the settings-label help glyph; focusable, so it shows on focus, not hover-only
- a11y: role=tooltip, aria-describedby wired to the active trigger (slotted, or the built-in help button), shows on focus, no leaked listeners

## When to use
- **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

Never hide essential information in a tooltip — it is unavailable on touch and to keyboard users who don't focus the trigger. Keep it to a short phrase; the trigger must be focusable.