Popovers

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

Variations

Default

Use default popovers to convey non-critical information.

White
Light
Dark
Black
<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

White
Light
Dark
Black
<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

White
Light
Dark
Black
<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.

White
Light
Dark
Black
<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.

Popover Positioning

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

White
Light
Dark
Black
<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>
White
Light
Dark
Black
<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.

©2017 Morningstar, Inc. All rights reserved. Terms of Use