120k
New

Hover Card

PreviousNext

For sighted users to preview content available behind a link.

Installation

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

Usage

<script lang="ts">
  import * as HoverCard from "$lib/components/ui/hover-card/index.js";
</script>
<HoverCard.Root>
  <HoverCard.Trigger>Hover</HoverCard.Trigger>
  <HoverCard.Content>
    SvelteKit - Web development, streamlined
  </HoverCard.Content>
</HoverCard.Root>

Composition

Use the following composition to build a HoverCard:

HoverCard.Root
├── HoverCard.Trigger
└── HoverCard.Content

Trigger Delays

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

<HoverCard.Root openDelay={100} closeDelay={200}>
  <HoverCard.Trigger>Hover</HoverCard.Trigger>
  <HoverCard.Content>Content</HoverCard.Content>
</HoverCard.Root>

Positioning

Use the side and align props on HoverCard.Content to control placement.

<HoverCard.Root>
  <HoverCard.Trigger>Hover</HoverCard.Trigger>
  <HoverCard.Content side="top" align="start">
    Content
  </HoverCard.Content>
</HoverCard.Root>

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.