Tooltip
A small popup that surfaces information about a control on hover or focus.
Basic Tooltip
Hover or focus the trigger to open. Escape, blur, or pointer leave closes.
Adds the item to your library
<BitBhTooltipProvider DelayDuration="200">
<BitBhTooltip class="inline-block">
<BitBhTooltipTrigger class="inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-3.5 py-2 text-sm font-medium cursor-pointer transition-colors hover:border-zinc-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
+ Add to library
</BitBhTooltipTrigger>
<BitBhTooltipContent Anchor="@(new BitBhAnchorOptions { To = "top", Gap = 6 })"
class="z-50 rounded-md bg-zinc-900 px-2.5 py-1 text-xs text-zinc-50 shadow-md">
Adds the item to your library
</BitBhTooltipContent>
</BitBhTooltip>
</BitBhTooltipProvider>Provider configuration
BitBhTooltipProvider sets DelayDuration and SkipDelayDuration. Move quickly between triggers — the next one opens instantly.
Save changes
Edit this item
Permanently delete
<BitBhTooltipProvider DelayDuration="500" SkipDelayDuration="500">
<div class="flex items-center gap-2">
<BitBhTooltip class="inline-block">
<BitBhTooltipTrigger class="inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-3.5 py-2 text-sm font-medium cursor-pointer transition-colors hover:border-zinc-400">
Save
</BitBhTooltipTrigger>
<BitBhTooltipContent Anchor="@(new BitBhAnchorOptions { To = "top", Gap = 6 })"
class="z-50 rounded-md bg-zinc-900 px-2.5 py-1 text-xs text-zinc-50 shadow-md">
Save changes
</BitBhTooltipContent>
</BitBhTooltip>
<BitBhTooltip class="inline-block">
<BitBhTooltipTrigger class="inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-3.5 py-2 text-sm font-medium cursor-pointer transition-colors hover:border-zinc-400">
Edit
</BitBhTooltipTrigger>
<BitBhTooltipContent Anchor="@(new BitBhAnchorOptions { To = "top", Gap = 6 })"
class="z-50 rounded-md bg-zinc-900 px-2.5 py-1 text-xs text-zinc-50 shadow-md">
Edit this item
</BitBhTooltipContent>
</BitBhTooltip>
<BitBhTooltip class="inline-block">
<BitBhTooltipTrigger class="inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-3.5 py-2 text-sm font-medium cursor-pointer transition-colors hover:border-zinc-400">
Delete
</BitBhTooltipTrigger>
<BitBhTooltipContent Anchor="@(new BitBhAnchorOptions { To = "top", Gap = 6 })"
class="z-50 rounded-md bg-zinc-900 px-2.5 py-1 text-xs text-zinc-50 shadow-md">
Permanently delete
</BitBhTooltipContent>
</BitBhTooltip>
</div>
</BitBhTooltipProvider>Show instantly
DelayDuration="0" opens immediately.
I open instantly
<BitBhTooltip DelayDuration="0" class="inline-block">
<BitBhTooltipTrigger class="inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-3.5 py-2 text-sm font-medium cursor-pointer transition-colors hover:border-zinc-400">
No delay
</BitBhTooltipTrigger>
<BitBhTooltipContent Anchor="@(new BitBhAnchorOptions { To = "top", Gap = 6 })"
class="z-50 rounded-md bg-zinc-900 px-2.5 py-1 text-xs text-zinc-50 shadow-md">
I open instantly
</BitBhTooltipContent>
</BitBhTooltip>Anchor sides and alignment
The engine flips and shifts to keep the tooltip in view.
Top
Right
Bottom
Left
<BitBhTooltipProvider DelayDuration="200">
<BitBhTooltip class="inline-block">
<BitBhTooltipTrigger class="inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-3.5 py-2 text-sm font-medium cursor-pointer">Top</BitBhTooltipTrigger>
<BitBhTooltipContent Anchor="@(new BitBhAnchorOptions { To = "top", Gap = 6 })" class="z-50 rounded-md bg-zinc-900 px-2.5 py-1 text-xs text-zinc-50 shadow-md">Top</BitBhTooltipContent>
</BitBhTooltip>
<BitBhTooltip class="inline-block">
<BitBhTooltipTrigger class="inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-3.5 py-2 text-sm font-medium cursor-pointer">Right</BitBhTooltipTrigger>
<BitBhTooltipContent Anchor="@(new BitBhAnchorOptions { To = "right", Gap = 6 })" class="z-50 rounded-md bg-zinc-900 px-2.5 py-1 text-xs text-zinc-50 shadow-md">Right</BitBhTooltipContent>
</BitBhTooltip>
<BitBhTooltip class="inline-block">
<BitBhTooltipTrigger class="inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-3.5 py-2 text-sm font-medium cursor-pointer">Bottom</BitBhTooltipTrigger>
<BitBhTooltipContent Anchor="@(new BitBhAnchorOptions { To = "bottom", Gap = 6 })" class="z-50 rounded-md bg-zinc-900 px-2.5 py-1 text-xs text-zinc-50 shadow-md">Bottom</BitBhTooltipContent>
</BitBhTooltip>
<BitBhTooltip class="inline-block">
<BitBhTooltipTrigger class="inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-3.5 py-2 text-sm font-medium cursor-pointer">Left</BitBhTooltipTrigger>
<BitBhTooltipContent Anchor="@(new BitBhAnchorOptions { To = "left", Gap = 6 })" class="z-50 rounded-md bg-zinc-900 px-2.5 py-1 text-xs text-zinc-50 shadow-md">Left</BitBhTooltipContent>
</BitBhTooltip>
</BitBhTooltipProvider>Controlled
External Open + OnOpenChange.
Driven from outside
<BitBhButton OnClick="ToggleControlled"
class="rounded-lg border border-zinc-200 bg-white px-3 py-1.5 text-sm font-medium hover:bg-zinc-100">
@(controlledOpen ? "Hide tooltip" : "Show tooltip")
</BitBhButton>
<BitBhTooltip Open="controlledOpen" OnOpenChange="v => controlledOpen = v" class="inline-block">
<BitBhTooltipTrigger class="inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-3.5 py-2 text-sm font-medium cursor-pointer">
Target
</BitBhTooltipTrigger>
<BitBhTooltipContent Anchor="@(new BitBhAnchorOptions { To = "top", Gap = 6 })"
class="z-50 rounded-md bg-zinc-900 px-2.5 py-1 text-xs text-zinc-50 shadow-md">
Driven from outside
</BitBhTooltipContent>
</BitBhTooltip>
@code {
private bool controlledOpen;
private void ToggleControlled() => controlledOpen = !controlledOpen;
}