Toggletip

Toggletips versus tooltips

Tooltips and toggletips look similar and both have interactive triggers, but they differ in how they are activated and what they can contain. A tooltip is exposed on hover or focus when you need to disclose brief, supplemental information that is not interactive. A toggletip is used on click or enter when you must expose interactive elements, such as a button, that a user needs to interact with.

When to use

• Use when an interactive element must be placed within the open toggletip
• Use for quick, in-context editing
• Use for filter panels that overlay content

When to not use

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

Anatomy

1. UI trigger: UI elements that trigger a toggletip on click or enter
2. Caret tip: Visually connects the content container to its trigger, indicating where the content originates
3. Container Contains text and interactive elements

Sizing

The toggletip container has a maximum width of 288px, and its height varies depending on the content inside. We recommend keeping the width within four columns. See more details on the Specifications tab.

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.

Main elements

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

Overflow content

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.

Further guidance

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

States

The toggletip component has two states: open (click or enter) and closed. By default, the toggletip is hidden and inactive. For more details on toggletip states, see the Specifications tab.

Interactions

Popover

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.

Disclosure

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.

Tooltip

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.