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">
        <svg class="luci-icon" aria-hidden="true">
            <use xlink:href="/icons/luci.svg#help"> </use>
        </svg>
    </div>
    <div class="luci-tooltip__content">
        <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">
        <svg class="luci-icon" aria-hidden="true">
            <use xlink:href="/icons/luci.svg#help"> </use>
        </svg>
    </div>
    <div class="luci-tooltip__content">
        <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 if a form label is not clear enough and needs extra explanation.
Use if adding information enhances the question, action, or field it applies to.

Use if the information is important enough to be placed directly on the page.
Use in place of 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.
UI elements with a tooltip should use role=tooltip aria-describedby attribute to associate itself with the tooltip.

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.