BT.com Design Guidelines

|  Introduction |  Notifications |  Grids |  Colours |  Typography |  Image Sizes |  Padding and Spacing |  Modals |  Icons |  Social Norms |  Dividers
|  Tables |  Package Selector |  Timelines |  Progress Indicator |  CTAs and Buttons |  Forms |  Tooltips |  Accordions |  Loaders | 

Tooltips


A tooltip is a small piece of contextual information about an element on the screen, which is displayed when a user clicks or focuses on the tooltip trigger.


Anatomy of a tooltip


A tooltip is made up of these elements:

Use it when…


Use tooltips sparingly, and to avoid sending the user to a different page. A tooltip should only display non-essential, on-the-spot information. Use a tooltip when an element on page is unclear, or if there’s too much information to include on screen.

 

How it behaves

Trigger

A tooltip should be triggered when the user clicks on the call to action.


Close

Layout

Placement

The tooltip description overlay should appear above, below or to the right of the trigger, depending on screen position. The tooltip is never wider than the content width, it never extends into the margins.

It’s important that the overlay doesn’t cover any important UI elements.

 

 

Content and copy


Description overlay

  • Always make sure tooltip copy is informative and concise.
  • Don’t repeat anything that’s already on screen.
  • Try to limit the overlay description to a maximum of 100 characters.
  • Don’t include links or imagery in the overlay.
  • Be aware that translation can add 20%-30% to the length of a tooltip description.
  • If you find yourself putting too much content in the tooltip, consider using a modal instead



Call to action labelling 

We use the label ‘What's this?’ for tooltips. It’s consistent, clear, actionable, and says exactly what the user will see when they click it.

Make sure the CTA is underlined to distinguish it as a tooltip, which opens an overlay, rather than a link, which directs a user to a new page.

Accessibility

Make sure the tooltip description is accessible – tabbing to the element displays the tooltip and the escape key hides the tooltip.

Ensure the focus is on and trapped within the tooltip when it's displayed, for keyboard readiness:

Tab key

Should move the focus to different elements within the tooltip only.


Escape key

Dismisses the tooltip.


Mobile

Always make sure tooltips are optimised for mobile for a better user experience.

 

Related guidelines

See <INSERT LINK> or <INSERT LINK>.




Changelog


1.0.1


1.0.0