Components / Library Version 5.4.0

Toggletip

A toggletip is used to provide information to a user to clarify a control or other content on a page. It is represented by an information icon button (an “i”) which displays the toggletip as a bubble when clicked. This differs from a tooltip in that a tooltip appears when a user hovers over or tabs to a button instead of clicking it, and the information provided in the tooltip usually explains what clicking on the button will do.

When the user hovers or tabs on the button, the message "More information" appears in a tooltip (this message cannot be changed). Non-visual users require a different, contextualized message, set via the label property.

PropertiesExamplesAccessibilityNotes

* Required property

label *
string
Required for accessibility purposes. Must contextually describe the toggletip for screen reader users. The label will not be rendered visually and does not affect the tooltip displayed.
tooltip *
string
The informational toggletip text that appears when the button is clicked.
target-size
small | large
Sets the target size of the button so that it can be larger when not used inline. Defaults to small. Learn more about WCAG 2.5.8 touch target requirements (link opens in new window) .
tooltip-position
top | right | bottom | left | top-right | top-left | bottom-right | bottom-left
Sets the position of both the tooltip that appears when the button is hovered over and the informational text that appears when the button is clicked. Defaults to bottom-right

Usage in HTML

Edit the code below to see changes reflected in the example above.

Usage in Elm

Code generated from HTML.

Keyboard Support

Key Function
Enter Space
  • Opens the Toggletip, focus remains on button.
  • Toggletip content is announced via screen reader.
Escape Closes the Toggletip, focus remains on button.
Tab Closes the Toggletip, focus moves to next focusable element.

If a Toggletip's position is set in such a way that there is no room to open, it will change tooltip-position accordingly. For example, if the Toggletip is on the bottom of the page with a position of bottom-right, it will be set to top-right. This works vertically and horizontally.

The tooltip for sighted users that displays on hover will appear wherever the toggletip-position determines.

If the button is activated while the Toggletip is already open, the content will be reannounced via screen reader and the Toggletip will remain open.
Back to Top