Tooltip
Contextual information on hover or focus.
<.tooltip value="Share">
<.button ghost><.icon name="u-share-06 icon" /></.button>
</.tooltip>
Content
Show text, icons, or custom content in tooltips for additional context.
<.tooltip>
<:content>
<h4>Setup integration</h4>
<p>Setup an integration to connect your account to a third-party service.</p>
</:content>
<.button variant="ghost">Tooltip</.button>
</.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 ghost><.icon name="u-share-06 icon" /></.button>
</.tooltip>
<.tooltip value="Favorite" class="rounded-full px-4 bg-purple-600 text-white">
<.button ghost><.icon name="u-star-01 icon" /></.button>
</.tooltip>
<.tooltip value="Download" class="bg-green-600 text-white font-medium text-xs">
<.button ghost><.icon name="u-download-01 icon" /></.button>
</.tooltip>
Delay
Set show and hide delays to prevent accidental triggering of tooltips.
<.tooltip value="Share" delay={250}>
<.button variant="ghost"><.icon name="u-share-06 icon" /></.button>
</.tooltip>