Skip to main content Skip to navigation

Tooltips

Show text adjacent to a hovered element.

Using Tooltips

Tooltips can provide helpful tips during your experience.

<p>Tooltips can provide helpful
    <span class="comet-tooltip comet-tooltip--top js-comet-tooltip-trigger" data-comet-tooltip-text="I am a helpful tip!" haspopup="true">tips</span> during your experience.</p>
                

Activating Tooltips

Tooltips are automatically activated when the document is ready. If you insert tooltips after this, you must call Comet.Tooltips.initialize() to activate the newly added tooltips.

Positioning

Position a tooltip using a modifier class, such as comet-tooltip--top. The nub will always point to the center of the element, but the tooltip can shift. Without a modifier, tooltips default to comet-tooltip--top.

The most common variations are top, bottom, left, and right.

<button class="comet-button comet-button--ghost comet-tooltip comet-tooltip--left js-comet-tooltip-trigger" data-comet-tooltip-text="Left">Left</button>
<button class="comet-button comet-button--ghost comet-tooltip comet-tooltip--top js-comet-tooltip-trigger" data-comet-tooltip-text="Top">Top</button>
<button class="comet-button comet-button--ghost comet-tooltip comet-tooltip--bottom js-comet-tooltip-trigger" data-comet-tooltip-text="Bottom">Bottom</button>
<button class="comet-button comet-button--ghost comet-tooltip comet-tooltip--right js-comet-tooltip-trigger" data-comet-tooltip-text="Right">Right</button>
                

Shifted Variations

Shift top and bottom variations to the right or left by adding -right or -left to the modifier classes, respectively. Shift left and right variations to the top or bottom by adding -top or -bottom to the modifier classes, respectively.

<button class="comet-button comet-button--ghost comet-tooltip comet-tooltip--top-left js-comet-tooltip-trigger" data-comet-tooltip-text="Top left">Top left</button>
<button class="comet-button comet-button--ghost comet-tooltip comet-tooltip--top-right js-comet-tooltip-trigger" data-comet-tooltip-text="Top right">Top right</button>
<button class="comet-button comet-button--ghost comet-tooltip comet-tooltip--bottom-left js-comet-tooltip-trigger" data-comet-tooltip-text="Bottom left">Bottom left</button>
<button class="comet-button comet-button--ghost comet-tooltip comet-tooltip--bottom-right js-comet-tooltip-trigger" data-comet-tooltip-text="Bottom right">Bottom right</button>
                

Edge Detection

Tooltips adapt automatically to display within the viewport. If a tooltip with the comet-tooltip--top variation is cut off by a viewport edge, it will automatically appear as comet-tooltip--bottom. Scroll to the top to see the below example adapt to fit within the viewport.

<button class="comet-button comet-button--ghost comet-tooltip comet-tooltip--top js-comet-tooltip-trigger" data-comet-tooltip-text="Scroll up to display below">Scroll to Top</button>
                

Guidelines

  • Use to clarify when an element’s action is ambiguous
  • Never use to display essential content, particularly on mobile devices
  • Add to inline, block, and inline-block elements
  • When adding a tooltip to text, style the text differently than surrounding text to indicate that there is an interaction
  • Use only plain text in the data-comet-tooltip-text attribute
  • Tooltip triggers should have the haspopup=true property for assistive technology functionality.

Class Reference

Class Applies to Outcome

.comet-tooltip

Elements that can have a child element

Base styles for tooltip target element.

.js-comet-tooltip-trigger

.comet-tooltip

Initializes tooltips when Comet.Tooltips.initialize() is called.

.comet-tooltip--top

.comet-tooltip

Displays tooltip centered above target element.

.comet-tooltip--left

.comet-tooltip

Displays tooltip centered to the left of the target element.

.comet-tooltip--right

.comet-tooltip

Displays tooltip centered to the right of the target element.

.comet-tooltip--top-right

.comet-tooltip

Displays tooltip above the target element and shifted right.

.comet-tooltip--top-left

.comet-tooltip

Displays tooltip above the target element and shifted left.

.comet-tooltip--bottom-right

.comet-tooltip

Displays tooltip below the target element and shifted right.

.comet-tooltip--bottom-left

.comet-tooltip

Displays tooltip below the target element and shifted left.

.comet-tooltip--left-top

.comet-tooltip

Displays tooltip to the left of the target element and shifted up.

.comet-tooltip--left-bottom

.comet-tooltip

Displays tooltip to the left of the target element and shifted down.

.comet-tooltip--right-top

.comet-tooltip

Displays tooltip to the right of the target element and shifted up.

.comet-tooltip--right-bottom

.comet-tooltip

Displays tooltip to the right of the target element and shifted down.

.comet-tooltip--on-dark

.comet-tooltip

Displays tooltip that is more visible on a dark background.

Navigation Menu