Tooltips

A tooltip shows supplemental information related to a specific UI element. The tooltip displays when a user hovers, places focus or taps on the corresponding UI element.

States

Trigger on hover or click

Default

Top Left

Top Right

Bottom Center

Bottom Left

Bottom Right

Left Center

Left Top

Left Bottom

Right Center

Right Top

Right Bottom

Copied to clipboard

<div class="luci-tooltip">
    <div class="luci-tooltip__trigger" aria-describedby="luci-tooltip-71170">
        <svg class="luci-icon" aria-hidden="true">
            <use xlink:href="/icons/luci.svg#help">
            </use>
        </svg>
    </div>
    <div class="luci-tooltip__content" role="tooltip" id="luci-tooltip-71170">
        <div class="luci-tooltip__content-inner">
            <div class="luci-tooltip__text"> This is a default tooltip on an icon. </div>
        </div>
    </div>
</div>

Trigger on click only

Default

Copied to clipboard

<div class="luci-tooltip luci-tooltip--hidden-on-hover">
    <div class="luci-tooltip__trigger" aria-describedby="luci-tooltip-81956">
        <svg class="luci-icon" aria-hidden="true">
            <use xlink:href="/icons/luci.svg#help">
            </use>
        </svg>
    </div>
    <div class="luci-tooltip__content" role="tooltip" id="luci-tooltip-81956">
        <div class="luci-tooltip__content-inner">
            <div class="luci-tooltip__text"> This is a default tooltip on an icon triggerd on click only. </div>
        </div>
    </div>
</div>

Do’s and Don’ts

Use a tooltip when a form label is not clear enough and needs extra explanation.
Use a tooltip when adding information enhances the question, action or field it applies to.

Do not use a tooltip if the information is important enough to be placed directly on the page.
Do not use a tooltip if it would be replacing help text to provide additional information for form fields.

Accessibility

Always use alt text that describes the tooltip content for screen readers.
For screen readers and touch devices, always allow users the option to click to open the tooltip.
The luci-tooltip__content element use the role="tooltip" attribute.
The luci-tooltip__trigger element should use the aria-describedby attribute which references the id of the associated luci-tooltip__content element.

Class Reference

Class	Applies to	Outcome
`.luci-tooltip`	Any `html` element.	Adds the tooltip container class.
`.luci-tooltip__trigger`	Any `html` element.	Adds the tooltip trigger behavior.
`.luci-tooltip--top-left`	`.luci-tooltip`	Positions the tooltip above the trigger element and aligned to the left.
`.luci-tooltip--top-right`	`.luci-tooltip`	Positions the tooltip above the trigger element and aligned to the right.
`.luci-tooltip--bottom-center`	`.luci-tooltip`	Positions the tooltip below and the trigger element and aligned to the center.
`.luci-tooltip--bottom-left`	`.luci-tooltip`	Positions the tooltip below the trigger element and aligned to the left.
`.luci-tooltip--bottom-right`	`.luci-tooltip`	Positions the tooltip below the trigger element and aligned to the right.
`.luci-tooltip--left-center`	`.luci-tooltip`	Positions the tooltip to the left of the trigger element and aligned to the center.
`.luci-tooltip--left-top`	`.luci-tooltip`	Positions the tooltip to the left of the trigger element and aligned to the bottom.
`.luci-tooltip--left-bottom`	`.luci-tooltip`	Positions the tooltip to the left of the trigger element and aligned to the top.
`.luci-tooltip--right-center`	`.luci-tooltip`	Positions the tooltip to the right of the trigger element and aligned to the center.
`.luci-tooltip--right-top`	`.luci-tooltip`	Positions the tooltip to the right of the trigger element and aligned to the bottom.
`.luci-tooltip--right-bottom`	`.luci-tooltip`	Positions the tooltip to the right of the trigger element and aligned to the top.
`.luci-tooltip--visible`	`.luci-tooltip`	Applies visibility property to tooltip.
`.luci-tooltip--hidden-on-hover`	`.luci-tooltip`	Removes the "appear on hover" behavior and only allows the tooltip to be shown on click.