120k
New

Hover Card

PreviousNext

For sighted users to preview content available behind a link.

Installation

pnpm dlx shadcn@latest add @force-ui-vue/hover-card

Usage

<script setup lang="ts">
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"
</script>
 
<template>
  <HoverCard>
    <HoverCardTrigger>Hover</HoverCardTrigger>
    <HoverCardContent>
      The Vue Framework – created and maintained by Evan You.
    </HoverCardContent>
  </HoverCard>
</template>

Composition

Use the following composition to build a HoverCard:

HoverCard
├── HoverCardTrigger
└── HoverCardContent

Trigger Delays

Use openDelay and closeDelay on the HoverCard to control when the card opens and closes.

<template>
  <HoverCard :open-delay="100" :close-delay="200">
    <HoverCardTrigger>Hover</HoverCardTrigger>
    <HoverCardContent>Content</HoverCardContent>
  </HoverCard>
</template>

Positioning

Use the side and align props on HoverCardContent to control placement.

<template>
  <HoverCard>
    <HoverCardTrigger>Hover</HoverCardTrigger>
    <HoverCardContent side="top" align="start"> Content </HoverCardContent>
  </HoverCard>
</template>

Examples

Basic

Sides

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference

See the Radix UI documentation for more information.