Hover Card - @ngrok/mantle

For sighted users to preview content available behind a link.

When to use

A HoverCard shows a preview of richer content (a user card, link preview, etc.) when a sighted user hovers a link or trigger.

Prefer Tooltip for short, non-interactive labels on controls.
Prefer Popover when the content must be reachable by all users and may contain interactive elements.

warning

Do not rely on a HoverCard as the only accessible path to important content. Because it opens on pointer hover, it is not a reliable path for keyboard or screen reader users. Any information inside a HoverCard must also be available through another fully accessible path (usually the underlying link).

1import { Button } from "@ngrok/mantle/button";2import { HoverCard } from "@ngrok/mantle/hover-card";3import { Icon } from "@ngrok/mantle/icon";4import { CalendarIcon } from "@phosphor-icons/react/Calendar";5import { ShrimpIcon } from "@phosphor-icons/react/Shrimp";6 7<HoverCard.Root>8	<HoverCard.Trigger asChild>9		<Button type="button" appearance="link">10			Open Hover Card11		</Button>12	</HoverCard.Trigger>13	<HoverCard.Content className="w-80">14		<div className="flex justify-between space-x-4">15			<div className="flex size-16 shrink-0 items-center justify-center rounded-full bg-pink-300">16				<Icon svg={<ShrimpIcon />} className="size-12" />17			</div>18			<div className="space-y-1">19				<h4 className="text-sm font-medium">@ngrok/mantle</h4>20				<p className="text-sm">The Design System – created and maintained by @ngrok.</p>21				<div className="flex items-center pt-2">22					<Icon svg={<CalendarIcon />} className="mr-2 h-4 w-4 opacity-70" />{" "}23					<span className="text-muted-foreground text-xs">Joined November 2023</span>24				</div>25			</div>26		</div>27	</HoverCard.Content>28</HoverCard.Root>;

Composition

Compose the parts of a HoverCard together to build your own:

HoverCard.Root├── HoverCard.Trigger└── HoverCard.Content

API Reference

The HoverCard component is built on top of Radix UI Hover Card.

HoverCard.Root

The root stateful component that manages the open/closed state of the hover card.

Prop	Type	Default	Description
`open`	`boolean`		The controlled open state of the hover card. Must be used in conjunction with `onOpenChange`.
`onOpenChange`	`(open: boolean) => void`		Event handler called when the open state of the hover card changes.
`defaultOpen`	`boolean`	`false`	The open state of the hover card when it is initially rendered. Use when you do not need to control its open state.
`openDelay`	`number`	`100`	The duration in milliseconds from when the mouse enters the trigger until the hover card opens.
`closeDelay`	`number`	`300`	The duration in milliseconds from when the mouse leaves the trigger or content until the hover card closes.

HoverCard.Trigger

The trigger element that opens the hover card when hovered.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Use the `asChild` prop to compose the trigger functionality onto your own component.

HoverCard.Content

The content to render inside the hover card. Appears in a portal with rich styling and animations.

Prop	Type	Default	Description
`side`	`"top"` \| `"right"` \| `"bottom"` \| `"left"`	`"bottom"`	The preferred side of the trigger to render against when open. Will be reversed when collisions occur and `avoidCollisions` is enabled.
`align`	`"start"` \| `"center"` \| `"end"`	`"center"`	The preferred alignment against the trigger. May change when collisions occur.
`sideOffset`	`number`	`4`	The distance in pixels from the trigger.
`alignOffset`	`number`	`0`	An offset in pixels from the `start` or `end` alignment options.
`avoidCollisions`	`boolean`	`true`	When `true`, overrides the `side` and `align` preferences to prevent collisions with boundary edges.
`collisionBoundary`	`Element \| null \| Array<Element \| null>`	`[]`	The element used as the collision boundary. By default this is the viewport.
`collisionPadding`	`number \| Partial<Record<Side, number>>`	`0`	The distance in pixels from the boundary edges where collision detection should occur.
`sticky`	`"partial"` \| `"always"`	`"partial"`	The sticky behavior on the align axis.
`hideWhenDetached`	`boolean`	`false`	Whether to hide the content when the trigger becomes fully occluded.