Hover Card

A card that appears when hovering over a trigger element, useful for displaying additional information.

Anatomy 

<script>
  import {
    HoverCard,
    HoverCardRoot,
    HoverCardTrigger,
    HoverCardContent,
    HoverCardArrow,
  } from "@saas-ui/svelte/components/hover-card";
</script>

<HoverCard.Root>
  <HoverCard.Trigger>Hover me</HoverCard.Trigger>
  <HoverCard.Content>
    <HoverCard.Arrow />
    <p>Additional information displayed on hover</p>
  </HoverCard.Content>
</HoverCard.Root>

Examples

Basic Accessibility

Basic hover card that appears when hovering over a link.

Controlled Accessibility

Controlled hover card with external state management.

Delays Accessibility

Customize open and close delays.

Placement Accessibility

Change the placement of the hover card.

Props

HoverCard.Root

The hover card container.

Prop Type Default Description
children Snippet - The hover card content.
id string auto-generated The unique identifier for the hover card.
size "xs" | "sm" | "md" | "lg" "md" The size of the hover card.
open boolean - Whether the hover card is open.
onOpenChange (details: { open: boolean }) => void - Handler called when the open state changes.
openDelay number 700 The duration from when the mouse enters the trigger until the hover card opens.
closeDelay number 300 The duration from when the mouse leaves the trigger or content until the hover card closes.
portalled boolean true Whether the hover card is portalled.
lazyMount boolean false Whether to enable lazy mounting.
unmountOnExit boolean false Whether to unmount on exit.
positioning HoverCardRootProps['positioning'] { placement: "bottom", gutter: 12 } The positioning options for the hover card.
onPrefetch () => void - Callback invoked when hovering over the trigger (for prefetching content). Similar to Astro's link prefetching, this allows preloading data before opening.

HoverCard.Trigger

The element that triggers the hover card on hover.

Prop Type Default Description
children Snippet - The trigger element content.
class string - Additional CSS classes to apply.
style string - Additional inline styles to apply.

HoverCard.Content

The content displayed inside the hover card.

Prop Type Default Description
children Snippet - The content to display in the hover card.
class string - Additional CSS classes to apply.

HoverCard.Arrow

An optional arrow element that points to the trigger.

Prop Type Default Description
class string - Additional CSS classes to apply.