Popovers

Purpose

Users need to be able to access additional related information or functionality without a change in context.

Description

• Popovers are a cross between a dialog and a tooltip
• Popovers are smaller contextual dialogs that are generally triggered by a click
• Popovers display information related to a particular item or control
• Popovers can be dismissed via a close icon, clicking the control that opened it, or by clicking anywhere outside of the popover
• The amount of content in a popover should be relatively short
• Popovers should be positioned based on the screen space available

Use a popover instead of a tooltip or dialog when:

• You want a contextual relationship that a dialog can’t provide
• You have more text/content than can comfortably fit in a tooltip

Note: Currently, popovers do not manage keyboard focus order. Therefore, in order for the popover to remain accessible for all users, avoid adding interactive controls to the popover (i.e. links, buttons, other form elements). If interactive controls are needed, consider using a modal dialog instead. For more information, please visit the Bootstrap Popover Component webpage.