Components / Library version 3.13.0

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.

Properties Examples Accessibility Notes

* Required property

label *
string
Required for accessibility purposes. Must contextually describe the toggletip for screen reader users. The label will not be rendered visually. Note, this does not affect the tooltip displayed for visual users.
tooltip *
string
The text content within the toggletip to display to the user.
tooltip-position
string
The position of the toggletip. Can be 'top' | 'right' | 'bottom' | 'left' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'. Defaults to 'bottom-right

Deprecated properties

tooltip-text*
string
Deprecated in favor of 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
  • 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.

In a compound component like Select or Action Menu, child components are rendered in the parent's slot element, part of its shadow DOM tree. Slots essentially serve as a placeholder for markup that you the developer define in the light DOM tree, like <wm-menuitem>, <wm-option>, text content, or other child elements.

The browser distributes the child elements defined in the light DOM into the shadow DOM of the parent. The result is a flattened DOM tree—a merger of the the light DOM and the shadow DOM. This flattened tree is what you see in DevTools and what is rendered on the page.

With the standard implementation of the component, dynamically updating the child items will throw an error. Elm's efficient diffing of the DOM will register that only the child items have changed and try to update them, but the component has already been composed.

Rendering the component in a Keyed node and giving it a dynamic id will cause the entire component, rather than just the child items, to render anew, avoiding the error.