StorybookGitHub

Hover Card

Displays content in a popover when a trigger is hovered.

Installation 

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/hover-card.json

Usage

Use a hover card to give sighted users a quick preview of content behind a link — a user profile, a linked document — without requiring a click. Not a substitute for accessible link text, since the preview only appears on hover/focus.

<script setup lang="ts">
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
</script>

<template>
  <HoverCard>
    <HoverCardTrigger as-child>
      <a href="https://nuxt.com" class="underline">@nuxt</a>
    </HoverCardTrigger>
    <HoverCardContent>
      <p class="text-sm">The Intuitive Vue Framework.</p>
    </HoverCardContent>
  </HoverCard>
</template>