Popover
Basic Popover
A click-triggered panel anchored to its button, with Escape and outside-click dismiss.
#popover#click#overlay
6 frameworksIntermediate
Loading…
A rich preview card that opens on hover AND keyboard focus, not hover alone.
<!--
Hover cards are the one popover that opens on hover - but hover alone is a bug:
invisible to the keyboard and impossible on touch. So this opens on
group-hover AND group-focus-within, the same pairing the tooltip needs.
-->
<span class="group relative inline-block">
<button type="button" class="rounded-sm font-semibold text-blue-700 underline decoration-dotted underline-offset-2 hover:text-blue-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-blue-300 dark:hover:text-blue-200 dark:focus-visible:ring-blue-400">
@dorian
</button>
<span role="dialog" aria-label="Dorian Vega" class="pointer-events-none invisible absolute left-0 top-[calc(100%+0.5rem)] z-20 block w-72 max-w-[calc(100vw-2rem)] rounded-xl border border-gray-200 bg-white p-4 text-left opacity-0 shadow-lg transition group-hover:pointer-events-auto group-hover:visible group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:visible group-focus-within:opacity-100 motion-reduce:transition-none dark:border-gray-700 dark:bg-gray-900">
<span class="flex items-center gap-3">
<span aria-hidden="true" class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-emerald-500 to-teal-500 text-sm font-semibold text-white">DV</span>
<span class="min-w-0">
<span class="block truncate text-sm font-semibold text-gray-900 dark:text-gray-100">Dorian Vega</span>
<span class="block truncate text-xs text-gray-500 dark:text-gray-400">Design Systems - joined 2023</span>
</span>
</span>
<span class="mt-3 block text-sm leading-relaxed text-gray-600 dark:text-gray-400">Maintains the token pipeline and the icon set.</span>
<a href="#profile" class="mt-3 inline-block rounded-sm text-sm font-semibold text-blue-700 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:text-blue-300 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">View profile</a>
</span>
</span>| Prop | Type | Default | Description |
|---|---|---|---|
triggerrequired | string | - | Trigger |
namerequired | string | - | Plan name shown as the heading. |
metarequired | string | - | Short supporting facts shown beneath the heading. |
descriptionrequired | string | - | Description |
linkLabel | string | 'View profile' | Link label |
delay | number | 200 | Seconds to wait before animating in. |
The one popover that opens on hover - but hover alone is a bug, invisible to the keyboard and impossible on touch. So it opens on hover AND focus, the same pairing the tooltip needs. A short `delay` stops it flickering as the pointer passes; the `relatedTarget` check on blur keeps it open while focus moves into the card's own link. Escape dismisses immediately. Unlike the click popovers it holds a link, so it is a non-modal card rather than a tooltip.