Overview

Popovers are reserved for situations like tooltips that provide additional information about the interface, but keep the UI clean. Popovers can include text, links, and rich HTML, which is not possible in a Tooltip.

When a popover is triggered by a click, it stays visible until the user clicks out of the area.

Popover

 

Click Tip

Design

The popover can include rich HTML and CSS— opposed to a Tooltip, which only allows for a simple text string. This allows the design of popovers to flex to different use cases.

Popovers (default)

Orientation

The Popover has four different orientations: top, right, bottom, left. Use the orientation that aligns the Popover tip to the trigger.

 

Click Tips

Similar in nature to the Hover tip, the Click Tip provides additional context or support within the product; and as the name implies, it is triggered via a click.

The trigger for Click Tips should always use a ? icon, and if available, a link to supporting documentation.

Click tips reveal supporting information when clicking on a help icon to provide more context or detailed description.



Guidelines

Use cases

• Provide additional context to a certain section of UI, that may require a link to support documentation
• Give ‘peeks’ into metadata about a resource or item—such as List metadata
• Provide contextual inputs or localized action confirmations

 

 

Examples

 

Content

• Popover messages should be concise and brief—no more than two sentences. Link to external documentation for further explanation.
• Include a title if the placement of the Popover makes the context ambiguous
• Text for links that support documentation should use ‘Learn more’ and can be placed inline with the text or appended at the bottom of the Popover body

Accessibility

• Keyboard Navigation:
• Ensure it can be opened, navigated, and closed using a keyboard alone. Typically, this means using the Tab, Esc, Arrow, and Enter keys.
• Support focus management: When opened, focus should move to the popover. When closed, focus should return to the element that opened it.
• Screen Readers:
• Use ARIA roles and properties correctly. For a popover, role="dialog" or role="tooltip" might be appropriate, depending on the content.
• Ensure the popover content is announced by screen readers when it appears.
• Include an accessible name and description.
• Focus Trap:
• When the popover is active, trap focus within it to ensure keyboard users can navigate its content without accidentally moving focus outside.
• Dismissal
• Allow clicking outside the popover or pressing the Esc key to close it.
• Size and Positioning:
• Ensure the popover does not cover other interactive content or crucial information.
• Adjust positioning or provide mechanisms to dismiss or move the popover if it obstructs content on smaller screens.

Health

Popover

 

Click tip