##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-textattribute - Tooltip triggers should have the
haspopup=trueproperty for assistive technology functionality.
##Class Reference
| Class | Applies to | Outcome |
|---|---|---|
|
|
Elements that can have a child element |
Base styles for tooltip target element. |
|
|
|
Initializes tooltips when |
|
|
|
Displays tooltip centered above target element. |
|
|
|
Displays tooltip centered to the left of the target element. |
|
|
|
Displays tooltip centered to the right of the target element. |
|
|
|
Displays tooltip above the target element and shifted right. |
|
|
|
Displays tooltip above the target element and shifted left. |
|
|
|
Displays tooltip below the target element and shifted right. |
|
|
|
Displays tooltip below the target element and shifted left. |
|
|
|
Displays tooltip to the left of the target element and shifted up. |
|
|
|
Displays tooltip to the left of the target element and shifted down. |
|
|
|
Displays tooltip to the right of the target element and shifted up. |
|
|
|
Displays tooltip to the right of the target element and shifted down. |
|
|
|
Displays tooltip that is more visible on a dark background. |