Hover Card

Reveals rich preview content on hover or keyboard focus.

Profile Preview

    <.hover_card id="user-hover-card">
  <:trigger><span>@sutra_ui</span></:trigger>
  <div class="space-y-3">
    <div class="flex items-center gap-3">
      <div class="size-10 rounded-full bg-primary text-primary-foreground">SU</div>
      <div>
        <p>Sutra UI</p>
        <p>@sutra_ui</p>
      </div>
    </div>
    <p>Phoenix LiveView components with CSS-first styling.</p>
  </div>
</.hover_card>
  

Positioning

Use side and align to control where the card appears relative to the trigger. Set side="auto" for viewport-aware placement that flips when space is tight.

Top Start

    <.hover_card id="release-hover-card" side="top" align="start">
  <:trigger>Release notes</:trigger>
  <div>
    <p>v0.4.0</p>
    <p>Includes new display primitives, runtime hooks, and docs updates.</p>
  </div>
</.hover_card>
  

Link Preview

Hover cards work well for previewing where a link goes — show the page title and a snippet without requiring a click.

Link Preview

    <.hover_card id="link-hover-card" side="right" align="start">
  <:trigger><a href="/docs/components/hover-card">the hover card docs</a></:trigger>
  <div>
    <p>Hover Card</p>
    <p>Reveals rich preview content on hover or keyboard focus.</p>
  </div>
</.hover_card>
  

Open And Close Delays

Tune open_delay and close_delay (milliseconds) to control how quickly the card appears and disappears. A longer open delay prevents flicker when scanning a list of triggers.

Slower Open Delay

    <.hover_card id="delayed-hover-card" open_delay={500} close_delay={200}>
  <:trigger>Hover slowly (500ms)</:trigger>
  <div>
    <p>Delayed open</p>
    <p>Useful for dense lists where instant opens would be distracting.</p>
  </div>
</.hover_card>
  