@ngrok/mantle — Hover Card

For sighted users to preview content available behind a link.

import { Button } from "@ngrok/mantle/button";
import { HoverCard } from "@ngrok/mantle/hover-card";
import { Icon } from "@ngrok/mantle/icon";
import { CalendarIcon } from "@phosphor-icons/react/Calendar";
import { ShrimpIcon } from "@phosphor-icons/react/Shrimp";

<HoverCard.Root>
	<HoverCard.Trigger asChild>
		<Button type="button" appearance="link">
			Open Hover Card
		</Button>
	</HoverCard.Trigger>
	<HoverCard.Content className="w-80">
		<div className="flex justify-between space-x-4">
			<div className="flex size-16 shrink-0 items-center justify-center rounded-full bg-pink-300">
				<Icon svg={<ShrimpIcon />} className="size-12" />
			</div>
			<div className="space-y-1">
				<h4 className="text-sm font-semibold">@ngrok/mantle</h4>
				<p className="text-sm">The Design System – created and maintained by @ngrok.</p>
				<div className="flex items-center pt-2">
					<Icon svg={<CalendarIcon />} className="mr-2 h-4 w-4 opacity-70" />{" "}
					<span className="text-muted-foreground text-xs">Joined November 2023</span>
				</div>
			</div>
		</div>
	</HoverCard.Content>
</HoverCard.Root>

API Reference

The HoverCard component is built on top of Radix UI Hover Card and provides a floating card that appears when a user hovers over a trigger element.

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. This is the distance between the trigger and the hover card content.
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, though you can provide additional element(s) to be included in this check.
collisionPadding	`number \| Partial<Record<Side, number>>`	`0`	The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object.
sticky	partial always	partial	The sticky behavior on the align axis. `"partial"` will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst `"always"` will keep the content in the boundary regardless.
hideWhenDetached	boolean	false	Whether to hide the content when the trigger becomes fully occluded.