The Toggletip component provides more information to a user. It is comprised of an icon-only button and the toggletip.
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
tooltip. Previously, the text content within the toggletip to display to the user.
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
For example, if the Toggletip is on the bottom of the page with a position of
bottom-right, it will be set to
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.