Information tips

We use information tips when a label, field, or value could benefit from additional explanation.

Guidelines

Do

Use an information tip for a term or value that cannot be made more self-explanatory, and that users will understand after receiving an explanation once.

Don't

Use information tips for explanatory content that users will need to refer to repeatedly - make it more visible instead.

Use information tips as a sticking plaster to obscure terms or abbreviations, especially if we've made them up ourselves

Anatomy

The presence of an information tip is indicated by an icon (information) next to the term that requires further explanation.

There are two possible interactions with an information tip

1. on hover, display the explanatory content
2. on click/tap, display a modal containing the explanatory content

Prefer the first method if the content is short (one sentence or less) and the second method if the content is longer.

Content

Explanatory content launched from information tips should be as concise as possible, whilst explaining the value or concept. Remember to use our tone of voice and style, and avoid using jargon or complicated language.

Accessibility

The information icon should have alt text that enables users to understand what will happen if they interact with it. For example "Learn more about accrued leave balance".