Skip to main content

Toggletip
ready

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.

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.

Do's​

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

Don'ts​

  • 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 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

Accessibility​

Toggletips are revealed by click rather than by hover and focus. It’s important that they make screen readers 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 make sure the user understands what extra information is in the Toggletip content (i.e. “More information”)
👋   Hi there!
If you see areas for improvement here, please contribute your ideas so we can continue expanding our coverage and ensuring our components are accessible.

Content​

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

Behaviors​

Triggers​

  • 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 close icon (x) — optional
    • clicking outside of 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.

Scrolling​

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

States​

Toggletips have two states.

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

Production Examples​

Further Reading & Sources​

Accessibility Resources: