Info label

Resources

Behavior

When the info button option is applied to an info label, an info button appears next to the label. When someone selects the info button, a popover appears and remains visible until they select something else or press Esc to dismiss it. Popovers can include formatting and links.

Layout

The info label accounts for proper placement between the label, info button, and popover. When the popover appears, its beak is centered on the info button, and the popover appears above, below, or to either side of the info button. Placement of the popover is programmatically determined so that it is least likely to block essential information.

Avoid cluttering an interface with multiple info labels, as this can result in cognitive overload, especially for people using keyboards and screen readers. If you think you need more than a two or three in one area, it may point to larger design issues that prevent at-a-glance clarity and ease of use. Consider simplifying the experience if possible.

If the information in the popover is long or critical to completing the task, consider summarizing some or all of it in an introductory paragraph instead of using an info label with popover.

Place critical info in a persistent place so that people can easily find it

Don’t hide critical info in an info button because people might miss it

Accessibility

When the info button is enabled, the aria-label automatically combines the visible label with “more information” so a screen reader reads “{visible label} more information button.” If someone presses Enter while the info button is selected, the popover opens.

Make sure the info button is included in the tab order of the page so that keyboard users can get to it.

Avoid cluttering the interface with multiple info buttons, as this can result in cognitive overload, especially for people using keyboards and screen readers.

Trapping focus

By default, popovers don’t trap focus. The popover is rendered inline, so people can use the Tab key to move into the popover, and Tab again to close the popover. If you turn the trapFocus property on, make sure that keyboard users can still easily access the popover content.

Content

Only include supplemental info

Limit the information shown in the popover to supplemental, non-essential information. Think of it as an FYI. If information is essential to completing a task, put it in persistent text elsewhere, such as descriptive body text under a section heading, rather than in an info button that requires interaction.

Keep the content brief and easy to understand at a glance—one or two short sentences, or a single sentence fragment. Avoid multiple paragraphs, bulleted lists, and other complex formatting. Capitalize the first word, and end full sentences with a period.

Don’t repeat information that already appears in visible labels.

Don’t repeat information that’s available elsewhere

Optional: use a link to help people dive deeper

For complex topics that might benefit from more context, link to additional information at the bottom of the popover. Use the default link treatment to give the link prominence. When selected, the link opens in a new tab or panel. Don’t include more than one link in a popover.

If the link will be relevant to most people, consider placing it in a more visible location instead of hidden within an info button.

Make sure that link text is specific about the information available at the link destination. Never use a generic phrase like “Learn more” by itself, because it won’t be understood by screen reader users, who may hear it without the context of nearby content. For more info, go to Link.

Make link text specific