Toggletip

Toggletips reveal supplemental content when a user clicks a button or another UI element and remains actively open until a user dismiss 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 asaccessibility requirements are maintained including focus order and ensure all functionality is operable through a keyboard interface.

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 tooltip is exposed on Hover or Focus when you need to expose brief, supplemental information that is not interactive. A toggletip is used on Click and Enter when you need to expose information that a user needs to interact with.

Don’t use to present critical information or request required input needed to complete a workflow. Use the modal component instead.

Toggletips can be used in many different ways and are not limited to the variants listed below.

The width and height of a popover container can vary depending on the amount of content placed within it. We recommend to not exceed a popover width size of four columns. Refer to the popover component for more specifications.

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.

For toggletips that are inline with other text, like a definition toggletip, do not obstruct words to the left and right of the trigger word. When the toggletip is active, ensure popover overlays other content and is not cut off by other surrounding components or bleeds off the page where some content is not visible.

Placement of a popover in relation to the trigger depends on the type of popover used. Visit the popover component for specific guidelines for no tip, caret tip, and tab tip types.

Heading, body, and footer content can vary based on your use case. To see examples of content used within toggletips, visit the disclosure pattern.

Since the toggletip uses the flexible popover component and disclosure pattern, scrolling is usually not needed. If scrolling is needed, in a dropdown like situation for instance, then the body section should scroll vertically with the header and footer remaining fixed in place if those elements are present. Do not scroll horizontally or let content bleed off the page.

For further content guidance, see Carbon’s content guidelines.

The toggletip component has two states—active and inactive. By default, the toggletip is hidden and inactive. Toggletips are displayed on Click and Enter.

Toggletips are triggered when a user clicks the interactive trigger and is dismissed by clicking anywhere outside the toggletip’s active popover.

Users can trigger a toggletip by pressing Enter or Space while the trigger element has focus. Users can dismiss a toggletip by pressing Escape. For additional keyboard interactions, see the accessibility tab.

VoiceOver: Users can trigger a toggletip by pressing Enter or Space while the trigger element has focus.

JAWS: Users can trigger a toggletip by pressing Enter or Space while the trigger element has focus.

NVDA: Users can trigger a toggletip by pressing Enter or Space while the trigger element has focus.

The definition toggletip provides inline additional help or defines a term. It may be used on the label of a UI element, on a word embedded in a paragraph, or in compact spaces such as data tables where icons clutter the UI. You can use definition tooltips on headers, body copy, or labels.

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.

Popovers are used as a base layer in some of our components like tooltips, overflow menus, and dropdown menus. For further guidance, see Carbon’s popover component.

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.

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.