Switch to M&TTooltip
Tooltips are elevated labels that provide brief, supplementary information about, or identify, the element they point to. They do not support rich text or complex operations.
Variants
Title
The Default Tooltip is triggered on tap, click or keyboard focus. It is dismissed by clicking the Close action or moving focus out of the tooltip. Change the modifier on the c-tooltip--top class to determine placement (--right, --bottom, --left). Remove the <h1> if no Title is needed.
<div class="c-tooltip c-tooltip--top">
<div class="c-tooltip__header">
<h1 class="c-tooltip__title">Title</h1>
<button class="c-tooltip__close-button">
Close <i class="c-tooltip__close-button-icon icon icon--close"></i>
</button>
</div>
<div class="c-tooltip__content">
I provide additional information that is nice to have but that you don't need to complete your task.
</div>
</div>Title
The Hover Tooltip is triggered on mouseover and dismissed on mouse away on non-touchscreen devices. Use a media-query to determine device type.
Change the modifier on the c-tooltip--top class to determine placement (--right, --bottom, --left). Remove the <h1> if no Title is needed.
<div class="c-tooltip c-tooltip--top">
<div class="c-tooltip__header">
<h1 class="c-tooltip__title">Title</h1>
</div>
<div class="c-tooltip__content">
I provide additional information that is nice to have but that you don't need to complete your task.
</div>
</div>The Icon Tooltip is triggered on mouseover and dismissed on mouse away. Change the modifier on the c-tooltip--top class to determine placement (--right, --bottom, --left).
<div class="c-tooltip--icon c-tooltip--top">
<div class="c-tooltip__content">
Additional information
</div>
</div>