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

This is a default tooltip on an icon.
Default
This is a top left tooltip on an icon.
Top Left
This is a top right tooltip on an icon.
Top Right
This is a bottom center tooltip on an icon.
Bottom Center
This is a bottom left tooltip on an icon.
Bottom Left
This is a bottom right tooltip on an icon.
Bottom Right
This is a left center tooltip on an icon.
Left Center
This is a left top tooltip on an icon.
Left Top
This is a left bottom tooltip on an icon.
Left Bottom
This is a right center tooltip on an icon.
Right Center
This is a right top tooltip on an icon.
Right Top
This is a right bottom tooltip on an icon.
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

This is a default tooltip on an icon triggerd 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

Do’s

  • 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.

Don’ts

  • 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.