Tooltip Examples
The Tooltip component provides contextual information when users hover over or interact with an element, with customizable placement, style, and animation options.
Basic Usage #
Create a basic tooltip by wrapping your trigger element with the Tooltip component and providing content.
This is a basic tooltip
<Tooltip Content="This is a basic tooltip">
<Button>Hover me</Button>
</Tooltip>Placements #
Control the position of your tooltip relative to the trigger element.
Top tooltip
Bottom tooltip
Left tooltip
Right tooltip
<div class="flex items-center gap-4">
<Tooltip Content="Top tooltip" Placement="TooltipPlacement.Top">
<Button>Top</Button>
</Tooltip>
<Tooltip Content="Bottom tooltip" Placement="TooltipPlacement.Bottom">
<Button>Bottom</Button>
</Tooltip>
<Tooltip Content="Left tooltip" Placement="TooltipPlacement.Left">
<Button>Left</Button>
</Tooltip>
<Tooltip Content="Right tooltip" Placement="TooltipPlacement.Right">
<Button>Right</Button>
</Tooltip>
</div>Styles #
Choose between different tooltip styles to match your design theme.
Dark style
Light style
Auto style (adapts to dark mode)
<div class="flex items-center gap-4">
<Tooltip Content="Dark style" Style="dark">
<Button>Dark</Button>
</Tooltip>
<Tooltip Content="Light style" Style="light">
<Button Color="ButtonColor.Light">Light</Button>
</Tooltip>
<Tooltip Content="Auto style (adapts to dark mode)" Style="auto">
<Button>Auto</Button>
</Tooltip>
</div>Triggers #
Customize how the tooltip is activated by choosing between hover and click triggers.
Hover to show
<div class="flex items-center gap-4">
<Tooltip Content="Hover to show" Trigger="hover">
<Button Color="ButtonColor.Green">Hover Trigger</Button>
</Tooltip>
<Tooltip Content="Click to show" Trigger="click">
<Button Color="ButtonColor.Green">Click Trigger</Button>
</Tooltip>
</div>Without Arrow #
Create a cleaner look by removing the arrow pointer from the tooltip.
No arrow tooltip
<Tooltip Content="No arrow tooltip" Arrow="false">
<button class="px-4 py-2 bg-purple-600 text-white rounded">No Arrow</button>
</Tooltip>Custom Animation #
Control the speed of the tooltip's appearance and disappearance with different animation durations.
Tooltip content
Tooltip content
Tooltip content
Tooltip content
<div class="flex flex-wrap gap-4">
<Tooltip Content="Tooltip content" Animation="@null">
<Button>Not animated tooltip</Button>
</Tooltip>
<Tooltip Content="Tooltip content" Animation="duration-150">
<Button>Fast animation</Button>
</Tooltip>
<Tooltip Content="Tooltip content" Animation="duration-300">
<Button>Normal speed animation</Button>
</Tooltip>
<Tooltip Content="Tooltip content" Animation="duration-500">
<Button>Slow animation</Button>
</Tooltip>
<Tooltip Content="Tooltip content" Animation="duration-1000">
<Button>Really slow animation</Button>
</Tooltip>
</div>