Hover Card

A hover card shows a preview of the content behind a link, so users decide whether to follow the link without leaving the page. It opens when users rest the mouse pointer on the trigger or move focus to it with the keyboard. It stays open while the pointer is on the trigger or on the card, and it closes when the pointer or the focus leaves, when users press Escape or when they press outside of the card. Touch input doesn't open the hover card, so everything in it must also be available behind the link. The trigger is a link without styles of its own, so the examples render it as a Button with the link variant. The content is 16rem wide.

UsageCopy Anchor Link

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

export function HoverCardDefault() {
	return (
		<HoverCard>
			<HoverCardTrigger render={<Button variant="link"/>}>Transfer 4821</HoverCardTrigger>
			<HoverCardContent>
				<p className="font-medium">Transfer in transit</p>
				<p className="text-muted-foreground">
					The 12 cases have left the warehouse and will reach the store on Tuesday.
				</p>
			</HoverCardContent>
		</HoverCard>
	);
}

ExamplesCopy Anchor Link

Trigger as LinkCopy Anchor Link

References in running text, such as a product in a note or a supplier in an order, usually lead to a page of their own. With an address in href, the trigger becomes a real link to that page, so users can follow it, open it in a new tab or copy its address, and the preview tells them beforehand what they will find there.

Top SideCopy Anchor Link

Links in a footer or in the last rows of a long table sit close to the lower edge of the screen. There, side set to "top" opens the card above the trigger, where it can show its content in full.

Right SideCopy Anchor Link

A navigation along the left edge of a screen, such as a list of stores, stacks its entries closely. Set to "right", side opens the card beside the trigger, so it covers none of the entries above or below.

Bottom SideCopy Anchor Link

Users read a page from top to bottom, and most links leave enough room beneath them. The card therefore opens below the trigger by default, and side set to "bottom" states this explicitly. Where the space below runs short, it moves above the trigger on its own.

Left SideCopy Anchor Link

Panels along the right edge of a screen, such as a list of open tasks, leave no room to their right. With the value "left", side opens the card toward the center of the screen, where it has the space it needs.

Open by DefaultCopy Anchor Link

A preview can matter before users reach for it, for example when a delivery has changed since their last visit. Through defaultOpen, the card is already open when the page appears. Users close it as they would close any hover card, and afterwards it opens again whenever they return to the link.

ControlledCopy Anchor Link

In some workflows, the application decides when a preview may appear, for example to keep it closed while users rearrange a list by dragging. Once it controls the card through open and onOpenChange, any part of the interface can open or close it as well.

API ReferenceCopy Anchor Link

HoverCardCopy Anchor Link

HoverCardTriggerCopy Anchor Link

HoverCardContentCopy Anchor Link