Skip to main content

Information tips

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

Guidelines​

:::tip do

sdcdscsdc

:::

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".