Components · Data Display

Tooltip

A short, transient hint shown on hover or focus of its trigger.

Examples

Placement

Colour

Arrow

Help trigger

Hover or focus a trigger · placements + a brand fill · the data-probe one is forced open for the scorecard

Shuffle options

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-tooltip> is the SAME shared custom element React and Vue consume — here in its
     native form. Theming comes only from the --aha-* tokens in tokens.css. Hover the trigger. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css">
<script type="module">
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-tooltip.js';   // registers <aha-tooltip>
</script>

<div style="padding:48px; display:flex; gap:40px">
  <!-- default: dark navy, above, arrow on, shows on hover/focus -->
  <aha-tooltip text="Copy share link">
    <button style="font-family:'Plus Jakarta Sans',sans-serif">Share</button>
  </aha-tooltip>

  <!-- placement + a brand fill + no arrow + click to toggle -->
  <aha-tooltip text="Opens below on click" placement="bottom" color="brand" arrow="false" trigger="click">
    <button style="font-family:'Plus Jakarta Sans',sans-serif">More</button>
  </aha-tooltip>

  <!-- edge-aligned: same side, aligned to the trigger's start edge, arrow offset near it -->
  <aha-tooltip text="Aligned to the left edge" placement="bottom-start">
    <button style="font-family:'Plus Jakarta Sans',sans-serif">Aligned</button>
  </aha-tooltip>

  <!-- help: the built-in `?` trigger — a DS <aha-icon name="system-question-mark"> at 16px, muted →
       brand on hover/focus. No slotted trigger needed; it's focusable, so it shows on focus too.
       The settings-label help-glyph pattern (sits next to a setting name). -->
  <label style="display:inline-flex; align-items:center; gap:6px; font-family:'Plus Jakarta Sans',sans-serif">
    Shuffle options
    <aha-tooltip help text="Randomise the order options appear in for each participant"></aha-tooltip>
  </label>
</div>

import '@ahaslides-product/design/aha-tooltip';   // registers <aha-tooltip>

// Attributes + slotted trigger only — no events — so React 18/19 can render it directly.
// placement: top | bottom | left | right (centred) OR edge-aligned top-start | top-end |
//   bottom-start | bottom-end | left-start | left-end | right-start | right-end
// color: dark | brand · arrow: true|false · trigger: hover|focus|click · help: built-in ? trigger
function AhaTooltip({ text, placement, color, arrow, trigger, help, children }) {
  return (
    <aha-tooltip text={text} placement={placement} color={color} arrow={arrow} trigger={trigger} help={help ? '' : undefined}>
      {children}
    </aha-tooltip>
  );
}

// usage — wrap the focusable trigger; never hide essential info in a tooltip
// edge-aligned: same side as `bottom`, aligned to the trigger's start edge, arrow near it
<AhaTooltip text="Copy share link" placement="bottom-start" color="brand">
  <button aria-label="Copy share link">Share</button>
</AhaTooltip>

// help — the built-in `?` trigger (DS <aha-icon>, 16px muted → brand); no slotted child needed,
// focusable so it shows on focus, not hover-only. The settings-label help-glyph pattern.
<label style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
  Shuffle options
  <AhaTooltip help text="Randomise the order options appear in for each participant" />
</label>

// main.ts — register the element + mark aha-* as custom elements
import '@ahaslides-product/design/aha-tooltip';
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');

// Component.vue — placement: top|bottom|left|right (centred) OR edge-aligned
//   top-start|top-end|bottom-start|bottom-end|left-start|left-end|right-start|right-end
//   · color: dark|brand · arrow: true|false · trigger: hover|focus|click · help: built-in ? trigger
<template>
  <aha-tooltip text="Copy share link" placement="bottom-start" color="brand">
    <button aria-label="Copy share link">Share</button>
  </aha-tooltip>

  <!-- help — the built-in `?` trigger (DS <aha-icon>, 16px muted → brand); no slotted child,
       focusable so it shows on focus, not hover-only. The settings-label help-glyph pattern. -->
  <label style="display:inline-flex; align-items:center; gap:6px">
    Shuffle options
    <aha-tooltip help text="Randomise the order options appear in for each participant" />
  </label>
</template>

API

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

Install

# .npmrc — once: point the @ahaslides-product scope at GitHub Packages
@ahaslides-product:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}   # a GitHub token with read:packages

npm i @ahaslides-product/design
import '@ahaslides-product/design/tokens.css';   // once, at the app root
import '@ahaslides-product/design/aha-tooltip';   // registers <aha-tooltip>

Agent feed for this component (absolute, fetchable anywhere): tooltip.agent.json · tooltip.md · tooltip.llms.txt

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.

Surfaces

editor dashboard settings audience

Spec

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