Product Name

Popovers

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

Variations

Default

Use default popovers to convey non-critical information.

Default 
<div class="mds-popover__wrapper mds-popover--overlay-closable mds-popover--overlay-dismissible">
    <button class="mds-button mds-popover__target mds-button--secondary" type="button" data-mds-popover="mds-popover--27086" aria-haspopup="true" aria-expanded="true" role="button"> Open Popover </button>
    <div class="mds-popover__overlay"></div>
    <div id="mds-popover--27086" class="mds-popover mds-popover--bottom-right mds-popover--width-300px 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>
  • 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 
<div class="mds-popover__wrapper mds-popover--overlay-closable mds-popover--overlay-dismissible">
    <button class="mds-button mds-popover__target mds-button--secondary" type="button" data-mds-popover="mds-popover--49130" aria-haspopup="true" aria-expanded="true" role="button"> Open Popover </button>
    <div class="mds-popover__overlay"></div>
    <div id="mds-popover--49130" class="mds-popover mds-popover--bottom-right mds-popover--width-500px 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-hidden="true">
                        <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>
  • 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 
<div class="mds-popover__wrapper mds-popover--overlay-closable mds-popover--overlay-dismissible">
    <button class="mds-button mds-popover__target mds-button--secondary" type="button" data-mds-popover="mds-popover--11481" aria-haspopup="true" aria-expanded="true" role="button"> Open Popover </button>
    <div class="mds-popover__overlay"></div>
    <div id="mds-popover--11481" class="mds-popover mds-popover--bottom-right mds-popover--width-300px 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>
  • 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 task must be completed, such as entering data and then saving or confirming.

Action Required 
<div class="mds-popover__wrapper mds-popover--dialog">
    <button class="mds-button mds-popover__target mds-button--secondary" type="button" data-mds-popover="mds-popover--13651" aria-haspopup="true" aria-expanded="true" role="button"> Open Popover </button>
    <div class="mds-popover__overlay"></div>
    <div id="mds-popover--13651" class="mds-popover mds-popover--bottom-right mds-popover--width-500px 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"> Action Required Popover </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 header to close it. </p>
        </div>
    </div>
</div>
  • Use when a task requires intentional confirmation or cancellation; the popover cannot be dismissed by pressing escape or clicking outside the popover.
  • Always use a Primary Button for the confirmation action.
  • Always use a Secondary Button for the cancellation action.
  • Always use small-sized Buttons in the popover header.

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.

Center Positioning 
<div class="mds-popover__wrapper mds-popover--overlay-closable mds-popover--overlay-dismissible">
    <button class="mds-button mds-popover__target mds-button--secondary" type="button" data-mds-popover="mds-popover--48467" aria-haspopup="true" aria-expanded="false" role="button"> Center Positioning </button>
    <div class="mds-popover__overlay"></div>
    <div id="mds-popover--48467" class="mds-popover mds-popover--bottom-center mds-popover--width-200px" 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 
<div class="mds-popover__wrapper mds-popover--overlay-closable mds-popover--overlay-dismissible">
    <button class="mds-button mds-popover__target mds-button--secondary" type="button" data-mds-popover="mds-popover--73415" aria-haspopup="true" aria-expanded="false" role="button"> Offset Positioning </button>
    <div class="mds-popover__overlay"></div>
    <div id="mds-popover--73415" class="mds-popover mds-popover--bottom-right mds-popover--width-200px" 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>

Sizing

Popovers are available at a single size, which uses bolded $mds-font-size-s (14px) text for the title and small Buttons for header actions.

Widths

To set the width and properly position popovers you must use one of the three predefined width modifier classes: mds-popover--width-200px, mds-popover--width-300px, or mds-popover--width-500px.

200px
300px
500px 
<div class="mds-popover__wrapper mds-popover--overlay-closable mds-popover--overlay-dismissible">
    <button class="mds-button mds-popover__target mds-button--secondary" type="button" data-mds-popover="mds-popover--99186" aria-haspopup="true" aria-expanded="true" role="button"> Open Popover </button>
    <div class="mds-popover__overlay"></div>
    <div id="mds-popover--99186" class="mds-popover mds-popover--bottom-right mds-popover--width-200px mds-popover--sticky" role="tooltip">
        <header class="mds-popover__header">
            <h3 class="mds-popover__title"> 200px width </h3>
        </header>
        <div class="mds-popover__content">
            <p class="mds-popover__paragraph"> This popover is 200px wide. </p>
        </div>
    </div>
</div>

Customizing Widths

Predefined widths are intended to be a starting point, if requirements call for a different popover width, work with a designer to create custom width styles in your product's CSS.

Product CSS
.mds-popover--top-center .my-custom-popover-width,
.mds-popover--bottom-center .my-custom-popover-width {
    margin-left: 200px; //Required for center positioning
    width: 400px;
}
Product Markup
<div class="mds-popover mds-popover--bottom-center my-custom-popover-width" role="tooltip"> ... </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 use role=”tooltip” on the .mds-popover element. For accessibility purposes the intent of the element is the same as a tooltip.

Additionally, update the Button component that triggers the popover to change its behavior:

  • Add aria-haspopup=”true” to the trigger button.
  • Add aria-expanded=”false” to the trigger button and dynamically update the value to true when popover is open.
  • Add aria-controls=”[Popover ID]” to the trigger button.

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__wrapper--visible

.mds-popover__wrapper

Toggles visibility of a popover.

.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.

.mds-popover--width-200px

.mds-popover

Renders a 200px wide popover.

.mds-popover--width-300px

.mds-popover

Renders a 300px wide popover.

.mds-popover--width-500px

.mds-popover

Renders a 500px wide popover.

.mds-popover--width-s

.mds-popover

Deprecated size class. Do not use.

.mds-popover--width-m

.mds-popover

Deprecated size class. Do not use.

.mds-popover--width-l

.mds-popover

Deprecated size class. Do not use.

.mds-popover--width-xl

.mds-popover

Deprecated size class. Do not use.

JavaScript Considerations

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

  • Do not use mds-popover—overlay-closable as this is deprecated and will be removed in 2.0.
  • Use mds-popover--overlay-dismissible to indicate that the popover is dismissible. This class is only included to account for demo JavaScript that does not ship with the component, you can utilize it as a hook in your JavaScript or omit it completely, but it is deprecated and will be removed in 2.0.
©2017 Morningstar, Inc. All rights reserved. Terms of Use