Popovers

Popovers are small content containers that provide a contextual overlay. They can be used as in-context feature explanations, dropdowns, or tooltips.

Help wanted! Each of our components will eventually ship with default JavaScript interactivity. We could use your help writing that JavaScript. To get started, check out the spec and a work in progress pull request.

For examples of some JavaScript that’s been shipped, see our sortable table component or our expandable control.

It can be tempting to hack together a quick fix in jQuery for displaying a Popover for your feature, but it may be just as much work as doing it properly as a Stimulus component—and this way every developer at Stack Overflow now has Popovers at their disposal.

Classes

Class Applies to Description
.s-popover N/A Base parent container for popovers
.is-visible .s-popover This class toggles the popover visibility
.s-popover--close .s-popover Used to dismiss a popover
.s-popover--arrow__tc .s-popover Popover arrow appears top center
.s-popover--arrow__tl .s-popover Popover arrow appears top left
.s-popover--arrow__tr .s-popover Popover arrow appears top right
.s-popover--arrow__bc .s-popover Popover arrow appears bottom center
.s-popover--arrow__bl .s-popover Popover arrow appears bottom left
.s-popover--arrow__br .s-popover Popover arrow appears bottom right
.s-popover--arrow__rc .s-popover Popover arrow appears right center
.s-popover--arrow__rt .s-popover Popover arrow appears right top
.s-popover--arrow__rb .s-popover Popover arrow appears right bottom
.s-popover--arrow__lc .s-popover Popover arrow appears left center
.s-popover--arrow__lt .s-popover Popover arrow appears left top
.s-popover--arrow__lb .s-popover Popover arrow appears left bottom

Examples

Popovers are provided without any positioning applied to them. It’s up to the implementer to choose how they’ll be positioned. This will most likely be achieved by adding something like ps-absolute t8 l8 to .s-popover. Positioning for arrows is provided, however. Arrow direction (top, right, bottom, left) will appear first, followed by the secondary (center, top, right, bottom, left). For example, a popover with an arrow child of .s-popover--arrow_tc will appear on the top of the .s-popover and centered horizontally. Though there are sensible defaults applied to the width of popovers, you may need to adjust manually.

By default, popovers are hidden. Adding the class .is-visible will show the popover.

Standard

1
2
3
4
<div class="s-popover">
    <div class="s-popover--arrow__tc"></div></div>

.s-popover--arrow__tc

Popover arrow appears top center

.s-popover--arrow__tl

Popover arrow appears top left

.s-popover--arrow__tr

Popover arrow appears top right

.s-popover--arrow__bc

Popover arrow appears bottom center

.s-popover--arrow__bl

Popover arrow appears bottom left

.s-popover--arrow__br

Popover arrow appears bottom right

.s-popover--arrow__rc

Popover arrow appears right center

.s-popover--arrow__rt

Popover arrow appears right top

.s-popover--arrow__rb

Popover arrow appears right bottom

.s-popover--arrow__lc

Popover arrow appears left center

.s-popover--arrow__lt

Popover arrow appears left top

.s-popover--arrow__lb

Popover arrow appears left bottom

Dismissible

In the case of new feature callouts, it may be appropriate to include an explicit dismiss button. You can add one using the styling provided by .s-popover--close.

1
2
3
4
5
6
7
<div class="s-popover">
    <button class="s-popover--close s-btn s-btn__muted" aria-label="Close">
        @Svg.ClearSm
    </button>
    <div class="s-popover--arrow__bl"></div></div>

.s-popover--close

Popover presented with a close button