Popover

Anatomy

Guidelines

When to use

Popovers display supplementary content within a floating overlay anchored to a trigger element. They support both static text and interactive elements such as buttons, links, or forms. Use Popovers when content is too long and detailed for a Tooltip but does not warrant a full Modal or new page.

Popover vs Modal and Tooltip

Popovers, Modals, and Tooltips all display content within a floating overlay. While similar, they are not interchangeable and each have their own separate use cases:

• Popovers typically contain long-form content that may include interactive elements. By default, they require explicit interaction to open, but opening on hover may be enabled. Popovers overlay page content but do not render the content inert.
• Tooltips display short, non-interactive text intended to provide the user with additional context. They appear automatically on hover and focus and are dismissed when the user moves away. Tooltips overlay page content but do not render the content inert.
• Modals are centered in the viewport and render page content inert. They are best suited for when the user must complete a focused task like a confirmation or form before returning to the page.

Best practices

Nesting

Never nest Popovers. While doing so is possible, it's not a pattern we'd like to encourage due to poor user experience. Nested Popovers complicate a workflow and increase the cognitive load a user may experience when attempting to read supplemental information or take an action.

Consider the following questions if nested Popovers become a consideration:

• Can the flow be reworked?
• Can the content be written inline or on another page?
• Can another component such as a Modal be used?

Appearance

Arrow visibility

The arrow is displayed by default to visually connect the Popover to its trigger. The arrow can be hidden when the Popover's trigger association is evident.

Trigger styles

Popovers support multiple trigger styles depending on the context.

Behaviors

States

Animation

Popovers animate in and out with a subtle fade and directional slide. The slide direction matches the Popover's placement relative to its trigger. The default transition duration is 125ms and can be customized with a component property.

Popovers that open on hover appear after a 250ms delay by default to prevent accidental activation during normal mouse movement. This delay can be adjusted as needed.

Dismissal

Popovers can be dismissed through clicking outside of the Popover, moving focus to another element outside the Popover, or pressing the Escape key while it's open. After closing, focus returns to the Popover's trigger.

Closing the Popover on focus loss can be disabled.

Draggable

Popovers can become draggable, allowing users to reposition the floating overlay. Draggable Popovers include a drag handle that supports mouse and keyboard interaction.

When the drag handle is focused, press the Space key and move the Popover with the arrow keys.

Positioning

Popovers can be positioned on any side of their trigger. The placement is not a guarantee—smaller viewports may cause the Popover to reposition as needed to remain visible to the user.

Content

Header and description

The most basic Popover content includes a header and description. The header should summarize the topic or intention while the description should further explain it. Be sure to write both in sentence case.

Length

Though Popovers typically contain more content than Tooltips, it's still recommended to keep Popover content concise. Use a maximum of three sentences. For longer content, consider using a Modal or moving content directly to the page flow.

Action labels

When Popovers include interactive elements, use labels that describe what action will take place.