EvoToolkit - v2.3.0 (Changelog)

Tooltip

Tooltip component which displays information when the tooltip icon is hovered over or in focus. Typically, tooltips are used to provide supporting information for other components such as inputs.

A use case may be an input with an acronym or jargon in the label, where the tooltip then explains what it means. Another could be clarification on why the business requires the information the user is providing.

Source

Contributors

Luke Harrison

Mixes
A mix is a new component variant created using another. Listed below are mixes in other components involving the tooltip.

  • Overview
  • Theming

Base

Hello, I'm a tooltip message. This is where information is displayed which may help the user.
<div class="c-tooltip"> <div class="c-tooltip__icon" tabindex="0"><svg><use xlink:href="#info"></use></svg></div> <div class="c-tooltip__message"> Hello, I'm a tooltip message. This is where information is displayed which may help the user. </div> </div>

This component requires an icon, so copy the below symbol into your root svg element If using EvoToolkit boilerplate, this is the empty <svg> just after the opening <body>. . You can also download the SVG directly for use in design apps.

Modifiers

A list of modifiers for the tooltip component, allowing you to change its appearance to fit a variety of roles and scenarios.

Modifiers can typically be combined to achieve the desired appearance, unless stated otherwise.

SizesDisabled

Makes the tooltip icon a little smaller.

This is disabled by default. Enable block variable $component-tooltip-size-modifiers or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

Hello, I'm a tooltip message. This is where information is displayed which may help the user.
Hello, I'm a tooltip message. This is where information is displayed which may help the user.
Hello, I'm a tooltip message. This is where information is displayed which may help the user.
<div class="c-tooltip u-margin-bottom-small"> <div class="c-tooltip__icon" tabindex="0"><svg><use xlink:href="#info"></use></svg></div> <div class="c-tooltip__message"> Hello, I'm a tooltip message. This is where information is displayed which may help the user. </div> </div> <div class="c-tooltip c-tooltip--small u-margin-bottom-small"> <div class="c-tooltip__icon" tabindex="0"><svg><use xlink:href="#info"></use></svg></div> <div class="c-tooltip__message"> Hello, I'm a tooltip message. This is where information is displayed which may help the user. </div> </div> <div class="c-tooltip c-tooltip--large"> <div class="c-tooltip__icon" tabindex="0"><svg><use xlink:href="#info"></use></svg></div> <div class="c-tooltip__message"> Hello, I'm a tooltip message. This is where information is displayed which may help the user. </div> </div>

InvertDisabled

We can add the invert modifier if the tooltip needs to be used on darker backgrounds.

This is disabled by default. Enable block variable $component-tooltip-invert-modifier or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

Hello, I'm a tooltip message. This is where information is displayed which may help the user.
<div class="c-tooltip c-tooltip--invert"> <div class="c-tooltip__icon" tabindex="0"><svg><use xlink:href="#info"></use></svg></div> <div class="c-tooltip__message"> Hello, I'm a tooltip message. This is where information is displayed which may help the user. </div> </div>

Left AlignedDisabled

Makes the tooltip appear from the left outwards of the icon.

Responsive classes available.

This is disabled by default. Enable block variable $component-tooltip-alignment-modifiers or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

Hello, I'm a tooltip message. This is where information is displayed which may help the user.
<div class="c-tooltip c-tooltip--left"> <div class="c-tooltip__icon" tabindex="0"><svg><use xlink:href="#info"></use></svg></div> <div class="c-tooltip__message"> Hello, I'm a tooltip message. This is where information is displayed which may help the user. </div> </div>

Right AlignedDisabled

Makes the tooltip appear from the right outwards of the icon.

Responsive classes available.

This is disabled by default. Enable block variable $component-tooltip-alignment-modifiers or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

Hello, I'm a tooltip message. This is where information is displayed which may help the user.
<div class="c-tooltip c-tooltip--right"> <div class="c-tooltip__icon" tabindex="0"><svg><use xlink:href="#info"></use></svg></div> <div class="c-tooltip__message"> Hello, I'm a tooltip message. This is where information is displayed which may help the user. </div> </div>

Center AlignedDisabled

Makes the tooltip appear from the center outwards of the icon.

Responsive classes available.

This is disabled by default. Enable block variable $component-tooltip-alignment-modifiers or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

Hello, I'm a tooltip message. This is where information is displayed which may help the user.
<div class="c-tooltip c-tooltip--left c-tooltip--right@md c-tooltip--center@md2"> <div class="c-tooltip__icon" tabindex="0"><svg><use xlink:href="#info"></use></svg></div> <div class="c-tooltip__message"> Hello, I'm a tooltip message. This is where information is displayed which may help the user. </div> </div>

EmbeddedDisabled

Allows you to place tooltips in the middle of text. Currently only supports tooltips with the c-tooltip--small modifier.

This is disabled by default. Enable block variable $component-tooltip-embedded-modifier or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

Hello, this is a test paragraph, and this is a test tooltip Hello, I'm a tooltip message. This is where information is displayed which may help the user. embedded in the middle of it.

<p>Hello, this is a test paragraph, and this is a test tooltip <span class="c-tooltip c-tooltip--small c-tooltip--embedded"> <span class="c-tooltip__icon" tabindex="0"><svg><use xlink:href="#info"></use></svg></span> <span class="c-tooltip__message"> Hello, I'm a tooltip message. This is where information is displayed which may help the user. </span> </span> embedded in the middle of it.</p>

You can theme the tooltip component to make it fit your brand. For more information on theming EvoToolkit, please see Configuring EvoToolkit.

Below is a list of theme variables and their default values.

Theme Variables

Theme Variables Default
$component-tooltip-icon-color primary