Hover Card

A popup card that displays additional information when hovering over a trigger element.

Usage

<script>
  import { 
    HoverCard, 
    HoverCardContent, 
    HoverCardTrigger 
  } from "$lib/components/ui/hover-card";
</script>

<HoverCard>
  <HoverCardTrigger>Hover over me</HoverCardTrigger>
  <HoverCardContent>
    <div class="p-4">
      <p>Card content</p>
    </div>
  </HoverCardContent>
</HoverCard>

Examples

API Reference

HoverCard

The main container component that manages the hover state.

Prop	Type	Default	Description
open	boolean	-	Whether the hover card is open
onOpenChange	(open: boolean) => void	-	Function called when open state changes

HoverCardTrigger

The element that triggers the hover card to open.

Prop	Type	Default	Description
asChild	boolean	false	Whether to extend the component as a child

HoverCardContent

The content displayed when the trigger is hovered.

Prop	Type	Default	Description
align	'start' \| 'center' \| 'end'	'center'	Alignment relative to the trigger
sideOffset	number	4	Distance from the trigger (in pixels)
className	string	''	Additional CSS class names

Implementation

The HoverCard component is built on top of the Bits UI library, which provides accessible primitives for building UI components:

<!-- HoverCardContent.svelte -->
<script lang="ts">
	import { LinkPreview } from "bits-ui";
	import type { LinkPreviewContentProps } from "bits-ui";
	import { cn } from "$lib/utils";

	type $$Props = LinkPreviewContentProps;

	let className: $$Props["className"] = undefined;
	export { className as class };
	export let ref: $$Props["ref"] = undefined;
	export let align: $$Props["align"] = "center";
	export let sideOffset: $$Props["sideOffset"] = 4;

	export let width: $$Props["style"]["width"] = undefined;
	export let side: $$Props["side"] = "bottom";
	export let transitionConfig: $$Props["transitionConfig"] = {
		duration: 100
	};
</script>

<LinkPreview.Portal>
	<LinkPreview.Content
		{ref}
		{align}
		{sideOffset}
		{side}
		style:width
		{transitionConfig}
		class={cn(
			"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
			className
		)}
		{...$$restProps}
	>
		<slot />
	</LinkPreview.Content>
</LinkPreview.Portal>

In the implementation above:

• The component uses Bits UI’s LinkPreview as a base
• It provides customizable props for alignment, offset, and transition effects
• Default styling includes animations for smooth open/close transitions
• The component respects accessibility best practices inherited from Bits UI