Tooltip

Basic implementation

Import

Import the settings and the tooltip scss files.

@import 'settings-tools/all-settings';

@import 'components/_c.tooltip';

Basic usage

To create a tooltip, apply the following classes:

• mc-tooltip on a div container
• mc-tooltip__content on the span tag

<div class="mc-tooltip mc-tooltip--top" aria-describedby="tooltipTop">
  <div class="your-content">Your custom content</div>
  <span id="tooltipTop" class="mc-tooltip__content" role="tooltip"
    >Tooltip text</span
  >
</div>

Behaviors

Position modifiers

You must apply one of these classes on your .mc-tooltip element according to the desired position for your tooltip:

• Top: mc-tooltip--top
• Right: mc-tooltip--right
• Bottom: mc-tooltip--bottom
• Left: mc-tooltip--left

<div class="mc-tooltip mc-tooltip--top">...</div>

No pointer variation

You must apply mc-tooltip--no-pointer modifier to your .mc-tooltip element.

Accessibility