Toggletip
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
string
string
string
Deprecated properties
string
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.
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.