Skip to main contentCarbon Design System

Toggletip

Toggletips use the disclosure pattern to toggle the visibility of a popover. They display additional, hidden information upon the click of a UI trigger element and can contain interactive elements.

New in v11: Toggletip should be used in place of tooltip if your content will contain interactive elements. If it does not have any interactive content, consider using Tooltip instead.

Overview

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.

Overview of toggletip

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 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 interactive elements, such as button, that a user needs to interact with.

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
Overview of when to use toggletips

The examples above are patterns. Carbon currently only supports the basic toggletip outlined below. In the future, other toggletip styles will be available.

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.

Live demo