Tooltip

// Place <Tooltip> inside the element it describes. Hover or focus the anchor.
<Button label="Save">
  <Tooltip>Saves your work</Tooltip>
</Button>

// Pin above the anchor instead of following the cursor.
<span style={{ cursor: 'help' }}>
  Status
  <Tooltip placement="top" static>Last checked 2 minutes ago</Tooltip>
</span>

// A near-instant tooltip on a keyboard-focusable button. Never use delay={0} — use ~50.
<Button priority="tertiary" underline="dashed" label="Focus me with the keyboard">
  <Tooltip delay={50} static>Shows on focus, dismiss with Esc</Tooltip>
</Button>

// Rich content — render anything.
<Button icon="info">
  <Tooltip placement="top">
    <strong>Heads up</strong> — this action can't be undone
  </Tooltip>
</Button>

// Interactive: the bubble becomes hoverable + clickable, so its content
// (links, buttons) works. `interactive` implies `static` (pinned) — a bubble
// that follows the cursor can't be entered. Move from the anchor into the
// bubble to click; press Esc to dismiss.
<Button label="Interact">
  <Tooltip interactive placement="top">
    See the <a href="/guide">full guide</a> for details
  </Tooltip>
</Button>

<button>
  Save
  <a-tooltip>Saves your work</a-tooltip>
</button>

// Adjacent — moving from one to the next cross-fades, no blink.
<Button label="First"><Tooltip>First tooltip</Tooltip></Button>
<Button label="Second"><Tooltip>Second tooltip</Tooltip></Button>

// Nested — wrap stray text in a <span> so the tooltip stays a direct child of
// the box (its anchor). The inner tooltip wins while you're over the inner button.
<div tabIndex={0}>
  <span>Outer box</span>
  <Tooltip>Outer tooltip</Tooltip>
  <Button label="Inner button"><Tooltip>Inner tooltip</Tooltip></Button>
</div>