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

Do

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

Don’t

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