Tooltips


Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element on the screen.

They can be used to provide information about concepts/terms/actions that are not self-explanatory or well known.

Avoid:Using tooltips to provide instructions or guidance. They shouldn't be used to show rich information including images and formatted text and avoid placing over plain text or other places where they are not discoverable.

Avoid:Tooltips shouldn't be used on disabled elements, such as buttons. It should be clear to the user why the button is disabled, without the tooltip needing to be revealed first.

Detached

In some cases you may need the tooltip element to exist outside of the element it is a tooltip for, in which case you can use the is-detached class with the u-hide utility, and JavaScript to set the desired position of the tooltip.

Import

To import just this component into your project, copy the snippet below and include it in your main Sass file.

@import 'patterns_tooltips';
@include vf-p-tooltips;

For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.

Design

For more information view the tooltips design spec, which includes the specification in markdown format and a PNG image.

For an alternative way of displaying discoverable information view our contextual menu component.