Dialtone

Tooltip

View Storybook

A tooltip is a floating label that briefly explains an action, function, or an element. Its content is exclusively text and shouldn't be vital information for users. If richer media is desired, consider using a popover instead.

Classes

ClassApplies toDescription

Examples

Base Styles

<button class="d-btn d-btn--outlined d-tooltip--hover" type="button">
    <div class="d-tooltip d-tooltip__arrow--bottom-center d-ps-absolute">
        <span>This is a simple tooltip. The tooltip can be positioned in multiple areas too!</span>
    </div>
    <span>Hover over me to see a tooltip</span>
</button>
<div class="d-tooltip d-tooltip__arrow--bottom-center d-tooltip--show">
    <span>This is a simple tooltip. The tooltip can be positioned in multiple areas too!</span>
</div>
<div class="d-tooltip d-tooltip__arrow--bottom-center d-tooltip--inverted d-tooltip--show">
    <span>This is a simple tooltip. The tooltip can be positioned in multiple areas too!</span>
</div>

Arrow Directions

No arrow direction is assigned by default. You must select a direction. Twelve directions are offered: three on each face of the tooltip.

Accessibility

ItemApplies toDescription
Last Updated: