EvoToolkit - v3.7.2 (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
  • Methods
  • Theming

Table of contents

Base

Modifiers

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="/static/img/evotoolkit-059f9bb4f6.svg#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>

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.

Sizes

Makes the tooltip icon a little smaller.

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-mb-small">
	<div class="c-tooltip__icon" tabindex="0"><svg><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#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-mb-small">
	<div class="c-tooltip__icon" tabindex="0"><svg><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#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="/static/img/evotoolkit-059f9bb4f6.svg#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>

Invert

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

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="/static/img/evotoolkit-059f9bb4f6.svg#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 Aligned

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

Responsive classes available.

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="/static/img/evotoolkit-059f9bb4f6.svg#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 Aligned

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

Responsive classes available.

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="/static/img/evotoolkit-059f9bb4f6.svg#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 Aligned

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

Responsive classes available.

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="/static/img/evotoolkit-059f9bb4f6.svg#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>

Embedded

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

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="/static/img/evotoolkit-059f9bb4f6.svg#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>

Click

Any tooltip with this modifier can only be activated via a click, rather than hover or focus.

Hello, I'm a tooltip message. This is where information is displayed which may help the user. 
<div class="c-tooltip c-tooltip--click">
    <div class="c-tooltip__icon" tabindex="0">
        <svg>
            <use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#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 has methods which allow you to programatically trigger actions. You can trigger these using the evo() selector.

See JavaScript API for more information and a list of shared, global methods.

open

Opens tooltip


												evo('.js-my-tooltip').tooltip('open');

close

Closes tooltip


												evo('.js-my-tooltip').tooltip('close');

toggle

Toggles tooltip between open/closed


												evo('.js-my-tooltip').tooltip('toggle');

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