HoverCard

Hover-and-focus triggered rich preview card for non-interactive contextual content.

Usage

<script lang="ts">
  import Button from '@lostgradient/cinder/button';
  import HoverCard from '@lostgradient/cinder/hover-card';
</script>

<HoverCard>
  {#snippet trigger()}
    <Button variant="ghost">Ada Lovelace</Button>
  {/snippet}

  <strong>Ada Lovelace</strong>
  <p>Mathematician, writer, and early computing collaborator.</p>
</HoverCard>

Guidance

Use When

• Showing a profile, issue, or metadata preview that is richer than a tooltip but still read-only.
• Revealing supplementary preview content on pointer hover or keyboard focus without moving focus.

Avoid When

• The floating content contains focusable controls — use popover.
• The trigger needs a short accessible description — use tooltip.