Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

<dui-tooltip>
    <dui-tooltip-trigger>
        <dui-button variant="ButtonVariant.Outline">
            <dui-icon name="calendar-plus"/>
            Add to Calendar
        </dui-button>
    </dui-tooltip-trigger>
    <dui-tooltip-content>
        Save your flight or hotel dates to your calendar.
    </dui-tooltip-content>
</dui-tooltip>

Usage

<dui-tooltip>
    <dui-tooltip-trigger>
        <!-- Add the element that triggers the tooltip -->
    </dui-tooltip-trigger>
    <dui-tooltip-content>
        <!-- Add the text to display inside the tooltip popover -->
    </dui-tooltip-content>
</dui-tooltip>

Examples

Position

Control the position of the tooltip relative to the trigger element using the tooltip-side and tooltip-align attributes.

<div class="grid grid-cols-2 gap-4">
    <dui-tooltip tooltip-side="PopupSide.Top" tooltip-align="PopupAlign.Start">
        <dui-tooltip-trigger>
            <dui-button variant="ButtonVariant.Outline" class="size-30">
                Top Start
            </dui-button>
        </dui-tooltip-trigger>
        <dui-tooltip-content>
            Positioned with the top start of the trigger
        </dui-tooltip-content>
    </dui-tooltip>
    <dui-tooltip tooltip-side="PopupSide.Right" tooltip-align="PopupAlign.Center">
        <dui-tooltip-trigger>
            <dui-button variant="ButtonVariant.Outline" class="size-30">
                Right Center
            </dui-button>
        </dui-tooltip-trigger>
        <dui-tooltip-content>
            Positioned with the right center of the trigger
        </dui-tooltip-content>
    </dui-tooltip>
    <dui-tooltip tooltip-side="PopupSide.Left" tooltip-align="PopupAlign.End">
        <dui-tooltip-trigger>
            <dui-button variant="ButtonVariant.Outline" class="size-30">
                Left End
            </dui-button>
        </dui-tooltip-trigger>
        <dui-tooltip-content>
            Positioned with the left end of the trigger
        </dui-tooltip-content>
    </dui-tooltip>
    <dui-tooltip tooltip-side="PopupSide.Bottom" tooltip-align="PopupAlign.End">
        <dui-tooltip-trigger>
            <dui-button variant="ButtonVariant.Outline" class="size-30">
                Bottom End
            </dui-button>
        </dui-tooltip-trigger>
        <dui-tooltip-content>
            Positioned with the bottom end of the trigger
        </dui-tooltip-content>
    </dui-tooltip>
</div>

Offset

Control the offset of the tooltip from the trigger element using the tooltip-offset attribute.

<dui-tooltip tooltip-offset="20">
    <dui-tooltip-trigger>
        <dui-button variant="ButtonVariant.Outline">
            Offset
        </dui-button>
    </dui-tooltip-trigger>
    <dui-tooltip-content>
        This tooltip is offset 20px from the trigger
    </dui-tooltip-content>
</dui-tooltip>

Use the delay attribute to specify the time delay (in ms) before the tooltip opens. Use the close-delay attribute to specify the time delay (in ms) before the tooltip closes after the mouse cursor or focus moves away.

<dui-group>
    <dui-tooltip delay="1000">
        <dui-tooltip-trigger>
            <dui-button variant="ButtonVariant.Outline">
                Open Delay (1000ms)
            </dui-button>
        </dui-tooltip-trigger>
        <dui-tooltip-content>
            Opened after 1000ms
        </dui-tooltip-content>
    </dui-tooltip>
    <dui-tooltip close-delay="1000">
        <dui-tooltip-trigger>
            <dui-button variant="ButtonVariant.Outline">
                Close Delay (1000ms)
            </dui-button>
        </dui-tooltip-trigger>
        <dui-tooltip-content>
            Will close after 1000ms
        </dui-tooltip-content>
    </dui-tooltip>
</dui-group>

Default open state

Use the default-open attribute to specify whether the tooltip must be open (i.e. displaying) be default.

<dui-tooltip default-open="true">
    <dui-tooltip-trigger>
        <dui-button variant="ButtonVariant.Outline">
            Default Open
        </dui-button>
    </dui-tooltip-trigger>
    <dui-tooltip-content>
        This tooltip is open by default.
    </dui-tooltip-content>
</dui-tooltip>

Teleport

Use the teleport attribute of dui-tooltip-content to teleport your tooltip content to another part of the DOM. This is helpful to break out of the z-index of the current container.

<dui-tooltip>
    <dui-tooltip-trigger>
        <dui-button variant="ButtonVariant.Outline">
            Teleport
        </dui-button>
    </dui-tooltip-trigger>
    <dui-tooltip-content teleport="body">
        This tooltip is teleported to be displayed as a child element of the &lt;body&gt;.
    </dui-tooltip-content>
</dui-tooltip>