Tooltip
A tooltip is a floating panel that displays helpful information when users hover over or focus on an element.
Usage
The tooltip component provides contextual information about an element when users hover over or focus on it. Unlike popovers, tooltips are triggered automatically on hover and focus, making them ideal for brief, supplementary information.
Basic
<div class="flex items-center justify-center p-8"> <twig:ui:Button data-tooltip="basic-tooltip"> Hover me </twig:ui:Button> </div> <twig:ui:Tooltip id="basic-tooltip"> <twig:ui:Tooltip:Content class="max-w-sm"> <p class="text-sm">This is a tooltip</p> <twig:ui:Tooltip:Arrow/> </twig:ui:Tooltip:Content> </twig:ui:Tooltip>
Delay
<div class="flex items-center justify-center gap-4 p-8"> <twig:ui:Button data-tooltip="no-delay-tooltip"> No delay </twig:ui:Button> <twig:ui:Button data-tooltip="short-delay-tooltip"> 500ms delay </twig:ui:Button> <twig:ui:Button data-tooltip="long-delay-tooltip"> 1000ms delay </twig:ui:Button> </div> <twig:ui:Tooltip id="no-delay-tooltip" delay="0"> <twig:ui:Tooltip:Content class="max-w-sm"> <p class="text-sm">No delay</p> <twig:ui:Tooltip:Arrow/> </twig:ui:Tooltip:Content> </twig:ui:Tooltip> <twig:ui:Tooltip id="short-delay-tooltip" delay="500"> <twig:ui:Tooltip:Content class="max-w-sm"> <p class="text-sm">500ms delay</p> <twig:ui:Tooltip:Arrow/> </twig:ui:Tooltip:Content> </twig:ui:Tooltip> <twig:ui:Tooltip id="long-delay-tooltip" delay="1000"> <twig:ui:Tooltip:Content class="max-w-sm"> <p class="text-sm">1000ms delay</p> <twig:ui:Tooltip:Arrow/> </twig:ui:Tooltip:Content> </twig:ui:Tooltip>
Group
<div class="flex gap-2"> <twig:ui:Button data-tooltip="group-tooltip-1"> Button 1 </twig:ui:Button> <twig:ui:Button data-tooltip="group-tooltip-2"> Button 2 </twig:ui:Button> <twig:ui:Button data-tooltip="group-tooltip-3"> Button 3 </twig:ui:Button> </div> <twig:ui:Tooltip:Group> <twig:ui:Tooltip id="group-tooltip-1"> <twig:ui:Tooltip:Content> <p class="text-sm">Tooltip for Button 1</p> <twig:ui:Tooltip:Arrow/> </twig:ui:Tooltip:Content> </twig:ui:Tooltip> <twig:ui:Tooltip id="group-tooltip-2"> <twig:ui:Tooltip:Content> <p class="text-sm">Tooltip for Button 2</p> <twig:ui:Tooltip:Arrow/> </twig:ui:Tooltip:Content> </twig:ui:Tooltip> <twig:ui:Tooltip id="group-tooltip-3"> <twig:ui:Tooltip:Content> <p class="text-sm">Tooltip for Button 3</p> <twig:ui:Tooltip:Arrow/> </twig:ui:Tooltip:Content> </twig:ui:Tooltip> </twig:ui:Tooltip:Group>