Skip to main content


Toggletips, similar to Tooltips, provide contextual support for users when needed. They are hidden by default, a UI trigger or text link is clicked to set them to their visible state. Toggletips, unlike tooltips, are persistent until a user takes action to dismiss them by clicking on the required X (close) trigger.

Live Editor
  title={'Title of the Toggletip'}
  content={'This is the content of the Toggletip'}
  footer={'Footer of the Toggletip'}
  <Button>Click to show Toggletip with header and footer!</Button>

When to use

Toggletips reveal supplemental content when a user clicks a button or another UI element and remains actively open until a user dismisses it.


  • Use when further context is needed to understand a topic.
  • Link to supporting documentation or content via a link.
  • Use when an interactive element must be placed within a tooltip-like component.
  • Use content that needs to persist for users to reference until they dismiss it.
  • Use for content that is informational to what a user is actively working on.
  • Provide users ways to navigate to docs for further learning.


  • Do not use if a user would be configuring, selecting, entering data, or editing content on a page through the toggletip.
  • Do not use when a Tooltip with clarifying text would suffice.
  • Do not house information critical to a user’s task completion.
  • Do not hide required information from a user to complete a task or workflow.
  • Do not use to surface actions to users.


Toggletips are revealed by clicking rather than by hovering and focusing. It's important for them to prompt screen readers to announce the information after the click event.

  • Include ARIA live region.
  • Use type="button" to avoid mistaking the trigger as a submit button.
  • Use a describable label or aria-label on the UI-Trigger to ensure the user understands what extra information is in the Toggletip content (i.e. “More information”).


Toggletips may contain a variety of information, from descriptive text to interactive elements such as buttons or links.



  • Toggletips display on:
    • User click of UI trigger.
    • Pressing ENTER or SPACE on a keyboard while the trigger element has focus.
  • Toggletips dismiss by:
    • User click of the close icon (x) — optional.
    • Clicking outside the popover container.
    • Pressing the ESC key.

User Interactions

  • Toggletips are intended to house interactive elements within them. UI elements such as buttons, text links, dropdowns, etc. are able to be fully interacted with inside of the toggletip.


  • In the instance that a toggletip requires scrolling of content (e.g. with a dropdown) the header and the footer of the toggletip remain fixed with the body enabling scroll.


Toggletips have two states.

  • Hidden — the default state of a toggletip.
  • Visible — state change is triggered by ui-trigger click or keyboard enter.

Production Examples

Further Reading & Sources

Accessibility Resources: