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
* Required property
top | right | bottom | left | top-right | top-left | bottom-right | bottom-left
Usage in HTML
Edit the code below to see changes reflected in the example above.
Usage in Elm
Code generated from HTML.
|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
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.