GitHub
New

Hover Card

For sighted users to preview content available behind a link.

Kobalte
Kobalte

The Hover Card component is built on top of Kobalte Hover Card, which provides accessible hover, focus, and keyboard behavior.

import { Button } from "~/components/ui/button";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "~/components/ui/hover-card";


export default function HoverCardDemo() {
  return (
    <HoverCard openDelay={10} closeDelay={100}>
      <HoverCardTrigger as={Button} variant="link">
        Hover Here
      </HoverCardTrigger>
      <HoverCardContent class="flex w-64 flex-col gap-0.5">
        <div class="font-semibold">@nextjs</div>
        <div>The React Framework – created and maintained by @vercel.</div>
        <div class="mt-1 text-muted-foreground text-xs">Joined December 2021</div>
      </HoverCardContent>
    </HoverCard>
  );
}

Installation

Usage

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "~/components/ui/hover-card";
<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>
    The React Framework – created and maintained by @vercel.
  </HoverCardContent>
</HoverCard>

Composition

Use the following composition to build a HoverCard:

HoverCard
├── HoverCardTrigger
└── HoverCardContent

Trigger Delays

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

<HoverCard openDelay={100} closeDelay={200}>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>Content</HoverCardContent>
</HoverCard>

Positioning

Use the placement prop on HoverCard to control where the content appears relative to the trigger.

<HoverCard placement="top-start">
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>Content</HoverCardContent>
</HoverCard>

Basic

import { Button } from "~/components/ui/button";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "~/components/ui/hover-card";


export default function HoverCardDemo() {
  return (
    <HoverCard openDelay={10} closeDelay={100}>
      <HoverCardTrigger as={Button} variant="link">
        Hover Here
      </HoverCardTrigger>
      <HoverCardContent class="flex w-64 flex-col gap-0.5">
        <div class="font-semibold">@nextjs</div>
        <div>The React Framework – created and maintained by @vercel.</div>
        <div class="mt-1 text-muted-foreground text-xs">Joined December 2021</div>
      </HoverCardContent>
    </HoverCard>
  );
}

Sides

import { For } from "solid-js";
import { Button } from "~/components/ui/button";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "~/components/ui/hover-card";


const HOVER_CARD_SIDES = ["left", "top", "bottom", "right"] as const;


export default function HoverCardSides() {
  return (
    <div class="flex flex-wrap justify-center gap-2">
      <For each={HOVER_CARD_SIDES}>
        {(side) => (
          <HoverCard openDelay={100} closeDelay={100} placement={side}>
            <HoverCardTrigger as={Button} variant="outline" class="capitalize">
              {side}
            </HoverCardTrigger>
            <HoverCardContent>
              <div class="flex flex-col gap-1">
                <h4 class="font-medium">Hover Card</h4>
                <p>This hover card appears on the {side} side of the trigger.</p>
              </div>
            </HoverCardContent>
          </HoverCard>
        )}
      </For>
    </div>
  );
}

API Reference

See the Kobalte Hover Card API reference for primitive props, keyboard behavior, and accessibility details.