Hover Card
Preview content behind a link on hover or focus, styled with Tailwind utilities.
Basic
Hover or focus the link to open the card after a short delay. The content is hoverable, so moving into it keeps the card open.
@radix-ui
R
Radix
@radix-ui
Components, icons, colors, and templates for building high-quality, accessible UI.
0 Following
2,900 Followers
<BitBhHoverCard class="inline-block">
<BitBhHoverCardTrigger class="font-semibold text-blue-600 hover:underline"
href="https://github.com/radix-ui" target="_blank" rel="noreferrer">
@@radix-ui
</BitBhHoverCardTrigger>
<BitBhHoverCardContent Anchor="@(new BitBhAnchorOptions { To = "bottom", Gap = 8 })"
class="relative z-50 w-80 rounded-xl border border-zinc-200 bg-white p-4 shadow-xl">
<div class="flex gap-3.5">
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-zinc-900 font-bold text-white">R</div>
<div>
<div class="font-bold text-zinc-900">Radix</div>
<div class="mb-1.5 text-sm text-zinc-500">@@radix-ui</div>
<p class="text-sm leading-relaxed text-zinc-700">Components, icons, colors...</p>
</div>
</div>
<BitBhHoverCardArrow class="fill-zinc-200 drop-shadow-[0_0_1.5px_#00000040] absolute
anchored-top:bottom-[-6px] anchored-top:left-1/2 anchored-top:-translate-x-1/2
anchored-bottom:top-[-6px] anchored-bottom:left-1/2 anchored-bottom:-translate-x-1/2 anchored-bottom:rotate-180" />
</BitBhHoverCardContent>
</BitBhHoverCard>Custom delays
Tune OpenDelay and CloseDelay (ms). This one opens instantly and lingers a second.
Quick open, slow close
Opens with no delay and stays for a full second after the pointer leaves.
<BitBhHoverCard OpenDelay="0" CloseDelay="1000" class="inline-block">
<BitBhHoverCardTrigger class="font-semibold text-blue-600 hover:underline" href="#">
Quick open, slow close
</BitBhHoverCardTrigger>
<BitBhHoverCardContent Anchor="@(new BitBhAnchorOptions { To = "bottom", Gap = 8 })"
class="relative z-50 w-72 rounded-xl border border-zinc-200 bg-white p-4 text-sm leading-relaxed text-zinc-700 shadow-xl">
Opens with no delay and stays for a full second after the pointer leaves.
@* The floating content carries data-anchor; the arrow reacts via anchored-* variants. *@
<BitBhHoverCardArrow class="fill-zinc-200 drop-shadow-[0_0_1.5px_#00000040] absolute
anchored-top:bottom-[-6px] anchored-top:left-1/2 anchored-top:-translate-x-1/2
anchored-bottom:top-[-6px] anchored-bottom:left-1/2 anchored-bottom:-translate-x-1/2 anchored-bottom:rotate-180" />
</BitBhHoverCardContent>
</BitBhHoverCard>Placement
The engine flips and shifts to keep the card in view.
<BitBhHoverCard class="inline-block">
<BitBhHoverCardTrigger class="font-semibold text-blue-600 hover:underline" href="#">Top</BitBhHoverCardTrigger>
<BitBhHoverCardContent Anchor="@(new BitBhAnchorOptions { To = "top", Gap = 8 })"
class="relative z-50 w-56 rounded-xl border border-zinc-200 bg-white p-3 text-sm text-zinc-700 shadow-xl">
Anchored to the top.
@* One arrow handles every side. The floating content carries data-anchor;
the arrow reacts to its ancestor via the anchored-* variants. *@
<BitBhHoverCardArrow class="fill-zinc-200 drop-shadow-[0_0_1.5px_#00000040] absolute
anchored-top:bottom-[-6px] anchored-top:left-1/2 anchored-top:-translate-x-1/2
anchored-bottom:top-[-6px] anchored-bottom:left-1/2 anchored-bottom:-translate-x-1/2 anchored-bottom:rotate-180
anchored-left:right-[-9px] anchored-left:top-1/2 anchored-left:-translate-y-1/2 anchored-left:rotate-[-90deg]
anchored-right:left-[-9px] anchored-right:top-1/2 anchored-right:-translate-y-1/2 anchored-right:rotate-90" />
</BitBhHoverCardContent>
</BitBhHoverCard>
@* ...repeat with To = "right" | "bottom" | "left" *@Controlled
Drive the open state with Open + OnOpenChange.
Target
Driven from outside via the Open parameter.
<BitBhButton OnClick="() => cardOpen = !cardOpen" class="...">
@(cardOpen ? "Hide card" : "Show card")
</BitBhButton>
<BitBhHoverCard Open="cardOpen" OnOpenChange="v => cardOpen = v" class="inline-block">
<BitBhHoverCardTrigger class="font-semibold text-blue-600 hover:underline" href="#">Target</BitBhHoverCardTrigger>
<BitBhHoverCardContent Anchor="@(new BitBhAnchorOptions { To = "bottom", Gap = 8 })"
class="relative z-50 w-64 rounded-xl border border-zinc-200 bg-white p-3 text-sm text-zinc-700 shadow-xl">
Driven from outside via the Open parameter.
<BitBhHoverCardArrow class="fill-zinc-200 drop-shadow-[0_0_1.5px_#00000040] absolute
anchored-top:bottom-[-6px] anchored-top:left-1/2 anchored-top:-translate-x-1/2
anchored-bottom:top-[-6px] anchored-bottom:left-1/2 anchored-bottom:-translate-x-1/2 anchored-bottom:rotate-180" />
</BitBhHoverCardContent>
</BitBhHoverCard>
@code {
private bool cardOpen;
}