Pattern library

Tooltips

Use tooltips to provide information about UI controls that are too small to have a label.
View full screen

Details

Source (Nunjucks)

<button class="w-button--icon" data-icon="{{ data.icon }}">
<span class="w-tooltip {{ data.modifier }}" role="tooltip">{{
data.tooltip
}}</span>
</button>

Output

<button class="w-button--icon" data-icon="unfold_less">
<span class="w-tooltip " role="tooltip">Standard alignment</span>
</button>

Variants

Left aligned

View full screen

Details

Source

<button class="w-button--icon" data-icon="{{ data.icon }}">
<span class="w-tooltip {{ data.modifier }}" role="tooltip">{{
data.tooltip
}}</span>
</button>

Output
<button class="w-button--icon" data-icon="unfold_less">
<span class="w-tooltip w-tooltip--left" role="tooltip">Standard alignment</span>
</button>

Right aligned

View full screen

Details

Source

<button class="w-button--icon" data-icon="{{ data.icon }}">
<span class="w-tooltip {{ data.modifier }}" role="tooltip">{{
data.tooltip
}}</span>
</button>

Output
<button class="w-button--icon" data-icon="unfold_less">
<span class="w-tooltip w-tooltip--right" role="tooltip">Standard alignment</span>
</button>