GitHub55X

Hover Card

Vue hover card that previews rich content on hover or focus without leaving the current page.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/hover-card.json

Usage

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

<template>
  <HoverCard.Root>
    <!-- … -->
  </HoverCard.Root>
</template>

Composition

      
      HoverCard.Root
├── HoverCard.ArrowTip
├── HoverCard.Arrow
├── HoverCard.Content
├── HoverCard.Context
├── HoverCard.Positioner
├── HoverCard.RootProvider
├── HoverCard.Trigger

Examples

Controlled

The controlled HoverCard component provides an interface for managing the state of the hover card using the open and onOpenChange props:

Root Provider

An alternative way to control the hover card is to use the RootProvider component and the useHoverCard hook. This way you can access the state and methods from outside the component.

Delay

Control the open and close delay of the hover card using the openDelay and closeDelay props:

Positioning

The HoverCard component can be customized in its placement and distance from the trigger element through the positioning prop:

Context

Access the hover card's state with HoverCard.Context or the useHoverCardContext hook:

Multiple Triggers

Share a single hover card across multiple trigger elements. Pass a value to each HoverCard.Trigger — the card repositions to the active trigger without closing.

API

See Ark UI Hover Card docs for full props and examples.

Floating PanelImage