Hover Card

A hover-triggered rich card that floats above the trigger using Floating UI.

<.hover_card></.hover_card>

Examples

Profile card

Hover a link to reveal a rich info card.

<.hover_card id="profile-hover-card">
  <:trigger>
    <.button variant="link">@shadix</.button>
  </:trigger>
  <div class="flex flex-col gap-2">
    <h4 class="text-sm font-semibold">Shadix</h4>
    <p class="text-sm text-muted-foreground">
      shadcn-style copy-paste UI components for Phoenix LiveView.
    </p>
    <span class="text-xs text-muted-foreground">Hover to reveal this card.</span>
  </div>
</.hover_card>

Show code

Props

Name	Type	Default	Values
class	:string
id	:string
inner_block (slot)	:slot
trigger (slot)	:slot