Required files

The markup

To create a tooltip there needs to be a trigger button and a tooltip element which is toggled using the toggle-element.js

The tooltip itself is used to position the tooltip box. It has a relative position and a full with, so the tooltip box will pin to the top left of the tooltip (unless modifying classes are used) and on mobile will span the full with of the tooltip element.

The tooltip trigger icon should be a button with the class .tooltip-icon and the data attribute with the ID name of the tooltip data-toggle-el="[TOOLTIP ID NAME]"

The tooltip needs an ID, the toggle-element.js data attribute data-js-module="toggleElement" and the classes .tooltip and .toggle-fade

Inside the tooltip should be an element with the class .tooltip__box and inside that should be the close button

The modifying classes available are to make the tooltip box wider .tooltip--lg, to change the positioning .tooltip--right, .tooltip--centre, and to invert the colour theme .tooltip--inverted. These classes are all applied to the tooltip element but they actually modify the tooltip box, so other global helpers can be used on the tooltip box itself if required.

The tooltip close trigger should be a button with the data attribute with the ID name of the tooltip data-close-el="[TOOLTIP ID NAME]". The close button in the examples below include a small cross icon and the class .tooltip__close is used for the positioning.

Global font sizing classes can be applied. The examples have a wrapper with the class .font-size-sm and the title is a <h5> or can have the .h5 class

<h3>Title with a tooltip <button type="button" data-toggle-el="tooltipExample" class="tooltip-icon"></button></h3>
<div data-js-module="toggleElement" id="tooltipExample" class="tooltip toggle-fade">
    <div class="tooltip__box">
        <button type="button" class="tooltip__close" data-close-el="tooltipExample"><i class="icon icon--xs"><svg>[SVG CROSS ICON]</svg></i></button>
        <div class="font-size-sm">
            <h5>Tooltip title</h5>
            <p>[TEXT CONTENT]</p>
        </div>
    </div>
</div>