Interactive Surfaces

Copy Markdown View Source

Interactive-surface controls add optional context to an already complete native trigger or destination. Their content must remain supplemental: required instructions, errors, actions, and unique task information belong in visible page content.

Tooltip

Tooltip attaches short escaped descriptive text to one structured button or link trigger. Supply id and text; placement is block_start, block_end, inline_start, or inline_end, and describedby merges existing description IDs. The trigger requires a visible label and kind={:button | :link}, then accepts the matching native button or link options. Hover and focus presentation is optional; the trigger stays complete without it.

<.tooltip id="manual-tip" text="Includes setup and deployment instructions.">
  <:trigger kind={:link} label="Read the complete manual" href="/manual" />
</.tooltip>

Hover Card

Hover Card enriches one complete ordinary link with noninteractive preview content. Its trigger requires label and href and may use native target, rel, download, and current-location options; placement uses the same four logical values and describedby can merge external descriptions. The preview may contain trusted presentation markup, but not links, controls, forms, scripts, or unique information unavailable at the destination.

<.hover_card id="manual-card" placement={:inline_end}>
  <:trigger label="Read the complete manual" href="/manual" />
  <h3>Manual preview</h3>
  <p>Setup, component usage, and deployment guidance.</p>
</.hover_card>