Popover

Readme

A non-modal overlay, showing contextually relevant content. Read more.


Example 1: Click Activated

A click activated popover (i.e. launched using a button) is the recommended way to open a custom popover.

Any kind of HTML control can go inside of a popover...

A link: www.ebay.com

A button:

An input:

A checkbox:


Example 2: Hover Activated (discouraged)

Keyboard users cannot hover; as a workaround, a click-activated stealth button is available immediately after the link (appears on keyboard focus).

Link

Any kind of HTML control can go inside of a popover...

A link: www.ebay.com

A button:

An input:

A checkbox:


Example 3: Focus Activated (discouraged)

This pattern is discouraged because it forces a keyboard user to navigate through all interactive items of the popover. The exception here would be if there is an aria-activedescendant relationship with the popover content (e.g. a combobox).

Any kind of HTML control can go inside of a popover...

A link: www.ebay.com

A button:

An input:

A checkbox:


Example 4: Hover and Focus Activated (discouraged)

This pattern is discouraged because it forces a keyboard user to navigate through all interactive items of the popover.

Link

Any kind of HTML control can go inside of a popover...

A link: www.ebay.com

A button:

An input:

A checkbox:


Updated: Jun 12th, 2025