Components / Library Version 5.5.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.
* Required property
string
string
small | large
small
.
Learn more about
WCAG 2.5.8 touch target requirements (link opens in new window) .
top | right | bottom | left | top-right | top-left | bottom-right | bottom-left
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 |
|
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.