Tooltip
Contextual information on hover or focus.
<.tooltip value="Share">
<.button variant="ghost"><.icon name="hero-share" class="size-4" /></.button>
</.tooltip>Content
Show text, icons, or custom content in tooltips for additional context.
<.tooltip>
<.button variant="ghost">Tooltip</.button>
<:content>
<h4 class="font-semibold">Setup integration</h4>
<p>Setup an integration to connect your account to a third-party service.</p>
</:content>
</.tooltip>Placement
Position tooltips in various directions relative to the trigger element.
<.tooltip value="Top" placement="right">
<.button variant="ghost">Top</.button>
</.tooltip>
<.tooltip value="Bottom" placement="bottom">
<.button variant="ghost">Bottom</.button>
</.tooltip>Customization
Apply custom styles to tooltips for seamless design integration.
<.tooltip value="Share" class="bg-blue-600 text-white">
<.button variant="ghost"><.icon name="hero-share" class="size-4" /></.button>
</.tooltip>
<.tooltip value="Favorite" class="rounded-full px-4 bg-purple-600 text-white">
<.button variant="ghost"><.icon name="hero-star" class="size-4" /></.button>
</.tooltip>
<.tooltip value="Download" class="bg-green-600 text-white font-medium text-xs">
<.button variant="ghost"><.icon name="hero-arrow-down-tray" class="size-4" /></.button>
</.tooltip>Delay
Set show and hide delays to prevent accidental triggering of tooltips.
<.tooltip value="Share" delay={250}>
<.button variant="ghost"><.icon name="hero-share" /></.button>
</.tooltip>