Hover Card

Rich preview on hover.

stableBase UI Preview Card

Preview

Code

tsx

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

export function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger render={<Button variant="link">@alvin</Button>} />
      <HoverCardContent>
        <p className="text-sm font-semibold text-fg">Alvin Loh</p>
        <p className="text-xs text-fg-muted">Product designer at DSTA.</p>
      </HoverCardContent>
    </HoverCard>
  );
}

Props

Prop	Type	Default	Description
openDelay	`number`	600	ms before opening on hover.
closeDelay	`number`	300	ms before closing after hover ends.

Sub-components

HoverCardTrigger— Element to hover.

HoverCardContent— The floating card.

Prop	Type	Default	Description
sideOffset	`number`	8	Pixel gap.
variant	`"solid" \| "glass"`	"solid"	Surface treatment.

Built on Base UI Preview Card. Rich hover preview — not for touch interfaces.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/hover-card.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

"use client";

import { cn } from "@/lib/utils";
import { PreviewCard as BasePreviewCard } from "@base-ui-components/react/preview-card";
import type { ComponentPropsWithoutRef } from "react";

export const HoverCard = BasePreviewCard.Root;
export const HoverCardTrigger = BasePreviewCard.Trigger;

export function HoverCardContent({
  className,
  sideOffset = 8,
  variant = "solid",
  ...props
}: ComponentPropsWithoutRef<typeof BasePreviewCard.Popup> & {
  sideOffset?: number;
  variant?: "solid" | "glass";
}) {
  return (
    <BasePreviewCard.Portal>
      <BasePreviewCard.Positioner sideOffset={sideOffset}>
        <BasePreviewCard.Popup
          className={cn(
            "z-50 w-64 rounded-lg border border-border p-4 shadow-md",
            variant === "glass" ? "surface-glass-panel" : "bg-surface-elevated",
            "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
            "data-[ending-style]:opacity-0 data-[ending-style]:scale-95",
            "transition-all duration-150",
            className,
          )}
          {...props}
        />
      </BasePreviewCard.Positioner>
    </BasePreviewCard.Portal>
  );
}

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmHoverCard (extends PopupControl). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmHoverCard;

PrizmHoverCard()
PrizmHoverCard(Node content)

Prop	Type	Default	Description
setContent	`(Node) → void`	—	The card body.
attach	`(Node owner) → void`	—	Show on mouse-enter of the owner, hide on exit.

Like PrizmPopover but hover-triggered; built on PopupControl (inherits the scene theme), reuses the .prizm-popover surface. Mirrors components/ui/hover-card.tsx.