Vivid API

Toggletip

A Toggletip is a type of Tooltip that is opened when clicking or tapping on the trigger button.

  • Contents of the toggletip are not announced on some screen readers.

    All the correct aria attributes and values are present. Deemed to be a screen reader limitation.

This component was tested and signed off by Applause (external accessibility specialists).

Implementation

Anchor Element Accessbility

The anchor element must be clickable (eg a Button) as this interaction is integral for the Toggletip’s functionalilty.

If the anchor element does not have a label (icon only button) you must provide an aria-label to provide a description for screen reader users.

Best Practices

Use Only If Absolutely Necessary

If the information is important enough for a Toggletip, isn’t it important enough to always be visible?

Location, Location, Location

Where you put your Toggletip is key. It is important that Toggletips are clearly visible, but they should not obscure other important website information or elements.

Write Crystal Clear Content

Toggletips should not take up too much space, so it is important to keep content down to the minimum.

Resources