A toggletip is a type of tooltip that is opened when clicking or tapping on the trigger button. It is closed when clicking or tapping outside of the toggletip. Clicking or tapping the button on a toggletip that is already open will simply refresh it (see accessibility notes).

Examples

Multiple toggletips in the same block container. Here‘s a tip A short tip. There‘s more to know. Make you look. This tooltip is placed below if possible without cropping.

This toggletip has a lot of content. Here’s a longer tooltip to test placement depending on the amount of content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum sequi adipisci veritatis, hic non inventore eligendi quidem corrupti? Distinctio, autem, obcaecati? Velit consequatur eum enim iure, voluptate odio, hic perferendis?

This toggletip is placed within a <span> with the .toggletip class added to a parent block-level element for positioning. Span Explanation text can be quite long. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. here.

Here’s a toggletip in a small block of text. Another short tip.

Usage

Rules

  • While tooltips can be opened on hover and focus, toggletips are opened with an explicit click or tap. This makes them ideal for when content is opt-in, meaning that a user explicitly has to open the popup to obtain contextual information.
  • Toggletips can be placed inside inline elements such as span, but then the .toggletip class needs to be added to a parent block-level element for positioning. The JavaScript will only add the .toggletip class to its parent if it doesn‘t find it on any of its ancestors.
  • Toggletips are created by adding data-toggletip to an element. The element will function as normative content in the instance that javascript is turned off. Acceptable elements include span, div, and p.
  • Use the appropriate symbol to indicate the type of tooltip (see configuration)

Constraints

  • Toggletips can only be opened by click/tap (or the enter/space keys for keyboard users)
  • Links and text formatting will not work in the toggletip (links should be avoided anyway because the popup itself is not be focusable)
  • Toggletips leverage edge detection and will adjust accordingly to the viewport. For example, a toggletip with position set to top may actually appear on the bottom if the top edge will not be visible off the top edge of the viewport, and vice versa.
  • Toggletips can be placed at any point within the parent content
  • Only one toggletip can be open at a time

Principles

  • Toggletips allow a user to opt in to more information within context

Accessibility

  • Toggletips generate a button so that the trigger is in the keyboard tab order and can be triggered by pressing the space or enter keys
  • The esc key closes an active toggletip
  • Clicking/tapping a toggletip trigger after the toggletip is already open will not close it. This is so that screen reader users will have the content read again for them. (A future enhancement will limit this to keyboard users only and allow a mouse click on the trigger to also close the toggletip.)
  • The data-btn-label is converted to aria-label on the trigger button to explain to a user what to expect
  • Toggletips use aria-live="assertive" to have the content read immediately upon being opened

Class Names

toggletip
Modifier

Place on the parent block-level element when a toggletip is nested within an inline element

Configuration

data-toggletip
Required

Use on the element that will be converted to the toggletip
data-char
Modifier

Can be i for info, ? for help, or ! for emphasis. These cannot be combined. The default is i.
data-position
Modifier

Can be top or bottom. Left and right positioning is handled with edge detection and when possible the toggletip will be centered on the trigger.
data-btn-label
Modifier

This will become the aria-label on the generated button and as such it should clearly indicate what content a user should expect when opening the toggletip, e.g. data-btn-details="read an explanation"
  • Last updated April 3, 2017
  • Authorable - Yes
  • Core - Toggletips