Tooltip

figma:ready
react:ready
scss:ready
vue:ready
webComponent:ready
Usage
Code
Specs
Design

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 (default)

  • 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

Don't forget to add the role="tooltip" attribute on the .mc-tooltip__content element

Don't forget to add an id attribute on the .mc-tooltip__content element

The .mc-tooltip element should contain an aria-describedby attribute set to the value of the id attribute of .mc-tooltip__content element.