Popovers

Popovers are compact containers attached to elements that hold additional information or controls.

Link Template

Variations

Default

Use default popovers to convey non-critical information.

Default

White

Light

Dark

Black

Copy to Clipboard Press Ctrl + C to copy

<div class="mds-popovers-sticky-example">
    <div class="mds-popover__wrapper mds-popover--overlay-closable">
        <button class="mds-button mds-popover__target mds-button--secondary" type="button" role="button"> Open Popover </button>
        <div class="mds-popover__overlay"></div>
        <div class="mds-popover mds-popover--bottom-right mds-popover--width-l mds-popover--sticky" role="tooltip">
            <header class="mds-popover__header">
                <h3 class="mds-popover__title"> Popover Title </h3>
            </header>
            <div class="mds-popover__content">
                <p class="mds-popover__paragraph"> Here's a bit of content for you. </p>
            </div>
        </div>
    </div>
</div>

Include a header to describe the popover’s content.
Dismiss a popover by:
- Clicking the invoking element again.
- Pressing escape.
- Clicking outside the popover.

With Close Icon

With Close Icon

White

Light

Dark

Black

Copy to Clipboard Press Ctrl + C to copy

<div class="mds-popovers-sticky-example">
    <div class="mds-popover__wrapper mds-popover--overlay-closable">
        <button class="mds-button mds-popover__target mds-button--secondary" type="button" role="button"> Open Popover </button>
        <div class="mds-popover__overlay"></div>
        <div class="mds-popover mds-popover--bottom-right mds-popover--width-xl mds-popover--sticky" role="tooltip">
            <header class="mds-popover__header mds-popover__header--has-buttons">
                <div class="mds-popover__buttons">
                    <button class="mds-button mds-button mds-button--small mds-popover__button mds-button--icon-only" type="button" role="button">
                        <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-labelledby="title">
                            <title>remove--s</title>
                            <use xlink:href="/assets/icons/mds_icons.svg#remove--s"></use>
                        </svg>
                    </button>
                </div>
                <h3 class="mds-popover__title"> Popover Title </h3>
            </header>
            <div class="mds-popover__content">
                <p class="mds-popover__paragraph"> This popover can be closed by clicking the “X” icon in the top right corner of the bubble. It will also close if you click outside the popover. You can select the text or click anywhere inside of the bubble, and the popover will not go away. </p>
            </div>
        </div>
    </div>
</div>

Include a close icon, remove--s, in the top right of the header to afford an additional method of dismissal.
Dismiss this variation by:
- Clicking the invoking element again.
- Clicking the close icon, remove--s.
- Pressing escape.
- Clicking outside the popover.

No Header

No Header

White

Light

Dark

Black

Copy to Clipboard Press Ctrl + C to copy

<div class="mds-popovers-sticky-example">
    <div class="mds-popover__wrapper mds-popover--overlay-closable">
        <button class="mds-button mds-popover__target mds-button--secondary" type="button" role="button"> Open Popover </button>
        <div class="mds-popover__overlay"></div>
        <div class="mds-popover mds-popover--bottom-right mds-popover--width-l mds-popover--sticky" role="tooltip">
            <div class="mds-popover__content">
                <p class="mds-popover__paragraph"> Here are a fewer than three sentences of content. These sentences can offer detail and give a user additional context. If you only have 10 words to say, use a Tooltip. </p>
            </div>
        </div>
    </div>
</div>

Invoke by click or hover, this is the only popover variation you can trigger on hover.
Omit unnecessary headers.
Dismiss this variation by:
- Clicking the invoking element again.
- Pressing escape.
- Clicking outside the popover.

Action Required

Use when a choice inside the popover requires explicit confirmation or cancellation.

Action Required

White

Light

Dark

Black

Copy to Clipboard Press Ctrl + C to copy

<div class="mds-popovers-sticky-example">
    <div class="mds-popover__wrapper mds-popover--dialog">
        <button class="mds-button mds-popover__target mds-button--secondary" type="button" role="button"> Open Popover </button>
        <div class="mds-popover__overlay"></div>
        <div class="mds-popover mds-popover--bottom-right mds-popover--width-xl mds-popover--sticky" role="tooltip">
            <header class="mds-popover__header mds-popover__header--has-buttons">
                <div class="mds-popover__buttons">
                    <button class="mds-button mds-button--small mds-popover__button" type="button" role="button"> Cancel </button>
                    <button class="mds-button mds-button--small mds-button--primary mds-popover__button" type="button" role="button"> Done </button>
                </div>
                <h3 class="mds-popover__title"> Please Decide </h3>
            </header>
            <div class="mds-popover__content">
                <p class="mds-popover__paragraph"> The user can't close this popover by clicking outside of it. The user must select one of the button options inside the popover to close it. </p>
            </div>
        </div>
    </div>
</div>

Omit unnecessary headers.
Dismiss this variation by:
- Clicking the invoking element again.
- Pressing escape.
- Clicking outside the popover.

There are 12 possible positions. Choose one that keeps the tooltip’s content in the viewport. For all positioning options see CSS Class References.

Center Positioning

White

Light

Dark

Black

Copy to Clipboard Press Ctrl + C to copy

<div class="mds-popover__wrapper mds-popover--overlay-closable">
    <button class="mds-button mds-popover__target mds-button--secondary" type="button" role="button"> Center Positioning </button>
    <div class="mds-popover__overlay"></div>
    <div class="mds-popover mds-popover--bottom-center mds-popover--width-l" role="tooltip">
        <header class="mds-popover__header">
            <h3 class="mds-popover__title"> Center Positioned </h3>
        </header>
        <div class="mds-popover__content">
            <p class="mds-popover__paragraph"> This popover use the bottom center position. </p>
        </div>
    </div>
</div>

Offset Positioning

White

Light

Dark

Black

Copy to Clipboard Press Ctrl + C to copy

<div class="mds-popover__wrapper mds-popover--overlay-closable">
    <button class="mds-button mds-popover__target mds-button--secondary" type="button" role="button"> Offset Positioning </button>
    <div class="mds-popover__overlay"></div>
    <div class="mds-popover mds-popover--bottom-right mds-popover--width-l" role="tooltip">
        <header class="mds-popover__header">
            <h3 class="mds-popover__title"> Offset Positioned </h3>
        </header>
        <div class="mds-popover__content">
            <p class="mds-popover__paragraph"> This popover use the bottom right position. </p>
        </div>
    </div>
</div>

Guidelines

Use When

Displaying supplementary content or actions, without obscuring the page.

Don't Use When

Creating a menu of options. Instead, see Menus.
When content is 10 words or fewer. Instead, use a Tooltip.
Requiring a user to complete a complex task. Instead, use a Modal.

Visual Language

Center the popover’s tail on its associated object, even if the popover’s balloon is offset.

Editorial

Popovers offer the opportunity to contextualize a choice, define a concept, and set expectations about what might lie beyond the clicking of a call to action nearby.

Use plain language, don’t use acronyms.
Keep it to no more than three short sentences. Anything longer should be relayed in a Modal, conjured by a link.

Accessibility

Always show on focus and hide on blur if the target element is an .mds-text__anchor or .mds-button.
Use the appropriate ARIA pre-defined role value in a role=”” attribute on the .mds-popover_target. For example, if the target is a button, the attribute would be <button role=”button”>, if the target is an anchor, the attribute would be <a role=”link”>.
Always use role=”tooltip” on the .mds-popover element. For accessibility purposes the intent of the element is the same as a tooltip.

Code Reference

CSS Class References

Class	Applies to	Outcome
`.mds-popover`	`<div>`	Initializes a `<div>` with the basic styles shared across all popovers.
`.mds-popover__wrapper`	Any block, or inline-block element, most likely a `<div>`	Always apply to the immediate parent of the popover’s target element, wrapping the target and the popover itself.
`.mds-popover__target`	Any inline, block, or inline-block element	Enables showing the popover on press of `enter`/`return`. For example, if the popover target is an `<a>` or `<button>` and is within browser focus, pressing `enter` will show the popover.
`.mds-popover__close-button`	`<a>`	The hook set on an anchor inside of a `.popover` that leverages the JS to trigger the popover fade out.
`.mds-popover--top-center`	`.mds-popover`	Aligns popover to the top center of the invoking element.
`.mds-popover--top-right`	`.mds-popover`	Aligns popover to the top right of the invoking element.
`.mds-popover--top-left`	`.mds-popover`	Aligns popover to the top left of the invoking element.
`.mds-popover--bottom-center`	`.mds-popover`	Aligns popover to the bottom center of the invoking element.
`.mds-popover--bottom-right`	`.mds-popover`	Aligns popover to the bottom right of the invoking element.
`.mds-popover--bottom-left`	`.mds-popover`	Aligns popover to the bottom left of the invoking element.
`.mds-popover--right-center`	`.mds-popover`	Aligns popover to the right center of the invoking element.
`.mds-popover--right-top`	`.mds-popover`	Aligns popover to the right top of the invoking element.
`.mds-popover--right-bottom`	`.mds-popover`	Aligns popover to the right bottom of the invoking element.
`.mds-popover--left-center`	`.mds-popover`	Aligns popover to the left center of the invoking element.
`.mds-popover--left-top`	`.mds-popover`	Aligns popover to the left top of the invoking element.
`.mds-popover--left-bottom`	`.mds-popover`	Aligns popover to the left bottom of the invoking element.

JavaScript Considerations

Engineers should use their own JavaScript libraries and implementations that most appropriately fit within the requirements for their applications and environments.