Components / Library version 3.25.1

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.

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 and does not affect the tooltip displayed.
tooltip *
string
The informational toggletip text that appears when the button is clicked.
tooltip-position
top | right | bottom | left | top-right | top-left | bottom-right | bottom-left
Sets the position of both the tooltip that appears when the button is hovered over and the informational text that appears when the button is clicked. 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.