HoverCard

A hovercard is a small overlay that appears when you hover over a link or other element. HoverCards are used to provide additional information about an element without having to navigate to a new page.

View on GitHub

Hover over the cake

Usage

import { HoverCard } from '@nerdfish/ui'

<HoverCard.Root>
	<HoverCard.Trigger>Hover over the cake</HoverCard.Trigger>
	<HoverCard.Content>
		<div className="space-y-2">
			<h4 className="text-sm font-semibold">@darenmalfait</h4>
			<p className="text-sm">
				The ultimate cake making guide – created and maintained by
				@darenmalfait.
			</p>
		</div>
	</HoverCard.Content>
</HoverCard.Root>