Toggletip
Toggletips should be used in place of tooltips if your content contains interactive elements. They display additional, hidden information upon the click of a UI trigger element and can contain interactive elements. If they do not have any interactive content, consider using Tooltips instead.
Toggletips reveal supplemental content when a user clicks a button or another UI element and remains actively open until a user dismisses it.
A toggletip is comprised of a UI trigger and the popover component. Use the disclosure pattern to design supplemental content within the component.
Toggletips can include a wide variety of information and interactive elements as long as accessibility requirements are maintained including focus order and ensuring all functionality is operable through a keyboard interface.
Toggletips verses Tooltips
Toggletips and tooltips are similar visually and both contain a popover and interactive trigger element. The two components differ in the way they are invoked and dismissed and if the user must interact with the contents.
A toggletip is used on Click and Enter when you need to expose interactive elements, such as button, that a user needs to interact with.
A tooltip is exposed on Hover or Focus when you need to expose brief, supplemental information that is not interactive.
The exception here is that definition tooltip can be invoked on either Hover or Click depending on use case.
1. A toggletip is used on Click and Enter when you need to expose interactive elements, such as button, that a user needs to interact with.
2. A tooltip is exposed on Hover or Focus when you need to expose brief, supplemental information that is not interactive.
3. The exception here is that definition tooltip can be invoked on either Hover or Click depending on use case.
When to use
Use when an interactive element must be placed within the popover
Use for quick, in context editing
Use for filter panels that overlay content
When not to use
Don’t use to present critical information or request required input needed to complete a workflow. Use the modal component instead.
Content
Heading, body, and footer content can vary based on your use case. To see examples of content used within toggletips, visit the disclosure pattern.
Interactive tooltips may contain rich text and other interactive elements like buttons or links and must remain actively open until a user dismisses the toggletip. Maintain accessibility requirements including focus order and ensure all functionality is operable through a keyboard interface.
Universal behaviors
States:
The toggletip component has two states—active and inactive. By default, the toggletip is hidden and inactive. Toggletips are displayed on Click and Enter.
Interactions:
Mouse:
Toggletips are triggered on Click and is dismissed by clicking anywhere outside the toggletip’s active popover or UI trigger.
Keyboard:
Users can trigger a toggletip by pressing Enter or Space while the trigger element has focus. Users can dismiss a toggletip by pressing Escape.
Screen readers/VoiceOver:
Users can trigger a toggletip by pressing Enter or Space while the trigger element has focus.
Related
Popovers are used as a base layer in some of our components like tooltips, overflow menus, and dropdown menus.
Disclosures use popovers as a base layer. Disclosures are comprised of a popover container, text, and interactive elements. Interactive elements are kept in the tab order of the page. Further guidance on the disclosure pattern coming soon.
Tooltips display additional information upon hover or focus. The information included should be contextual, helpful, and nonessential while providing that extra ability to communicate and give clarity to a user.
Toggletips reveal supplemental content when a user clicks a button or another UI element and remains actively open until a user dismisses it by clicking anywhere outside the toggletip’s active popover or UI trigger.
Formating
UI trigger button: Usually a button but as long as the trigger is interactive, it can visually change its shape and size depending on the use case.
Caret tip: An indicator that is added to a popover container to help show the relationship between the popover and where it was triggered from. Toggletips can utilize no tip, caret tip, or tab tip types.
Content area: Varies based on use case and follows disclosure guidelines.
Popover container: Area that contains text and interactive elements.
Placement
Toggletips can be used on various part of the UI including, but not limited to, headers, data tables, side panels, modals, and read only cards. When active, the toggletip popover may be positioned top, bottom, left, or right to the UI trigger.
Color
Interactive states
Typography
Structure
All toggletips have a varying height based on the amount of content they contain.
Accessibility considerations
Tooltips contain limited content so we can use an ‘announcer’ to announce tooltip content to people using screen readers e.g. using an ARIA live region.
After the tooltip opens, initial focus should be set on the first focusable element in the tooltip. See WAI-ARIA Authoring Practices Modal Dialog Example, Accessibility Features section for best practices on setting focus. Note: This does not apply to the tooltip icon or tooltip definition components.
After the tooltip closes, focus should retain the user’s point of regard and return to the element that invoked it. Note: This does not apply to the tooltip icon or tooltip definition components where focus never leaves the element that invokes it.
The tooltip component’s focus must not move outside the modal until it is closed. Note: This does not apply to the tooltip icon or tooltip definition components, as noted above, focus never leaves the element that invokes it.
