Popovers

Display content in a non-modal panel adjacent to an element.

Default

Trigger a popover using the click or focus event, which positions the popover below the target element by default.

Popovers are triggered by click and focus by default.
<button class="comet-button comet-button--ghost comet-popover-trigger js-comet-popover-trigger " data-comet-popover="comet-popover-52494" aria-describedby="comet-popover-52494">Click to Open Popover</button>
<div class="comet-popover comet-popover--bottom " id="comet-popover-52494">
    <div class="comet-popover__nub"></div>
    Popovers are triggered by click and focus by default.
</div>
                

Positioned

Position a popover using a modifier class, such as comet-popover--top. The nub will always point to the center of the element, but the popover can shift vertically or horizontally. Without a modifier, popovers default to comet-popover--bottom The most common variations are left, top, bottom, and right.

These are some common popover positions.

These are some common popover positions.

These are some common popover positions.

These are some common popover positions.

<button class="comet-button comet-button--ghost comet-popover-trigger js-comet-popover-trigger " data-comet-popover="comet-popover-97703" aria-describedby="comet-popover-97703">Left</button>
<div class="comet-popover comet-popover--left " id="comet-popover-97703">
    <div class="comet-popover__nub"></div>
    <p>These are some common popover positions.</p>
</div>
<button class="comet-button comet-button--ghost comet-popover-trigger js-comet-popover-trigger " data-comet-popover="comet-popover-11532" aria-describedby="comet-popover-11532">Top</button>
<div class="comet-popover comet-popover--top " id="comet-popover-11532">
    <div class="comet-popover__nub"></div>
    <p>These are some common popover positions.</p>
</div>
<button class="comet-button comet-button--ghost comet-popover-trigger js-comet-popover-trigger " data-comet-popover="comet-popover-32016" aria-describedby="comet-popover-32016">Bottom</button>
<div class="comet-popover comet-popover--bottom " id="comet-popover-32016">
    <div class="comet-popover__nub"></div>
    <p>These are some common popover positions.</p>
</div>
<button class="comet-button comet-button--ghost comet-popover-trigger js-comet-popover-trigger " data-comet-popover="comet-popover-51494" aria-describedby="comet-popover-51494">Right</button>
<div class="comet-popover comet-popover--right " id="comet-popover-51494">
    <div class="comet-popover__nub"></div>
    <p>These are some common popover positions.</p>
</div>
                

Shifted

Shift top and bottom variations to the right or left by adding -right or -left to the modifier classes, respectively.

These popovers are horizontally shifted.

These popovers are horizontally shifted.

These popovers are horizontally shifted.

These popovers are horizontally shifted.

<button class="comet-button comet-button--ghost comet-popover-trigger js-comet-popover-trigger " data-comet-popover="comet-popover-65471" aria-describedby="comet-popover-65471">Top left</button>
<div class="comet-popover comet-popover--top-left " id="comet-popover-65471">
    <div class="comet-popover__nub"></div>
    <p>These popovers are horizontally shifted.</p>
</div>
<button class="comet-button comet-button--ghost comet-popover-trigger js-comet-popover-trigger " data-comet-popover="comet-popover-63018" aria-describedby="comet-popover-63018">Top right</button>
<div class="comet-popover comet-popover--top-right " id="comet-popover-63018">
    <div class="comet-popover__nub"></div>
    <p>These popovers are horizontally shifted.</p>
</div>
<button class="comet-button comet-button--ghost comet-popover-trigger js-comet-popover-trigger " data-comet-popover="comet-popover-46955" aria-describedby="comet-popover-46955">Bottom left</button>
<div class="comet-popover comet-popover--bottom-left " id="comet-popover-46955">
    <div class="comet-popover__nub"></div>
    <p>These popovers are horizontally shifted.</p>
</div>
<button class="comet-button comet-button--ghost comet-popover-trigger js-comet-popover-trigger " data-comet-popover="comet-popover-4191" aria-describedby="comet-popover-4191">Bottom right</button>
<div class="comet-popover comet-popover--bottom-right " id="comet-popover-4191">
    <div class="comet-popover__nub"></div>
    <p>These popovers are horizontally shifted.</p>
</div>
                

Shift left and right variations to the top or bottom by adding -top or -bottom to the modifier classes, respectively.

These popovers are vertically shifted.

These popovers are vertically shifted.

These popovers are vertically shifted.

These popovers are vertically shifted.

<button class="comet-button comet-button--ghost comet-popover-trigger js-comet-popover-trigger " data-comet-popover="comet-popover-83583" aria-describedby="comet-popover-83583">Left top</button>
<div class="comet-popover comet-popover--left-top " id="comet-popover-83583">
    <div class="comet-popover__nub"></div>
    <p>These popovers are vertically shifted.</p>
</div>
<button class="comet-button comet-button--ghost comet-popover-trigger js-comet-popover-trigger " data-comet-popover="comet-popover-8329" aria-describedby="comet-popover-8329">Left bottom</button>
<div class="comet-popover comet-popover--left-bottom " id="comet-popover-8329">
    <div class="comet-popover__nub"></div>
    <p>These popovers are vertically shifted.</p>
</div>
<button class="comet-button comet-button--ghost comet-popover-trigger js-comet-popover-trigger " data-comet-popover="comet-popover-81290" aria-describedby="comet-popover-81290">Right top</button>
<div class="comet-popover comet-popover--right-top " id="comet-popover-81290">
    <div class="comet-popover__nub"></div>
    <p>These popovers are vertically shifted.</p>
</div>
<button class="comet-button comet-button--ghost comet-popover-trigger js-comet-popover-trigger " data-comet-popover="comet-popover-55092" aria-describedby="comet-popover-55092">Right bottom</button>
<div class="comet-popover comet-popover--right-bottom " id="comet-popover-55092">
    <div class="comet-popover__nub"></div>
    <p>These popovers are vertically shifted.</p>
</div>
                

Show With Custom Event

You can display or hide a popover at any time by triggering show and hide events.

Now you can type "h" to hide me.

<input type="text" class="comet-form__input js-custom-event-trigger" placeholder="type s to show and h to hide" />
<div class="comet-popover comet-popover--bottom" id="custom-event-triggered">
    <div class="comet-popover__nub"></div>
    <p>Now you can type "h" to hide me.</p>
</div>
                
$(".js-custom-event-trigger").on("keyup", function(event) {
    var sKeyCode = 83;
    var hKeyCode = 72;
    var $popover = $(".comet-popover#custom-event-triggered");

    if (event.which === sKeyCode) {
        // el specifies the target element
        $popover.trigger("show", { "el": this });
    } else if (event.which === hKeyCode) {
        $popover.trigger("hide");
    }
});
                
                

Show on Hover

You can display popovers when a user hovers over a target element.

Popovers can also be triggered on hover

<button class="comet-button comet-button--ghost comet-popover-trigger js-comet-popover-trigger " data-comet-popover="comet-popover-47691" aria-describedby="comet-popover-47691" data-comet-popover-event="hover">Hover to Show Popover</button>
<div class="comet-popover comet-popover--bottom " id="comet-popover-47691">
    <div class="comet-popover__nub"></div>
    <p>Popovers can also be triggered on hover</p>
</div>
                

Combined with Tooltips

A target element can show a tooltip first on hover, and then a popover on click. Add the comet-tooltip and js-comet-tooltip-trigger classes and the data-comet-tooltip-text attribute to the target element to add a toolitp. More information on tooltips is available on the Tooltips page.

And here is a lot more text when you click on the button.

<button class="comet-button comet-button--ghost comet-popover-trigger js-comet-popover-trigger comet-tooltip comet-tooltip--bottom js-comet-tooltip-trigger" data-comet-popover="comet-popover-43366" aria-describedby="comet-popover-43366" data-comet-tooltip-text="Here is a little text.">Hover then Click</button>
<div class="comet-popover comet-popover--bottom " id="comet-popover-43366">
    <div class="comet-popover__nub"></div>
    <p>And here is a lot more text when you click on the button.</p>
</div>
                

Without Inset

Popovers have an inset padding of 16px by default. Add comet-popover--no-inset-padding to remove.

<button class="comet-button comet-button--ghost comet-popover-trigger js-comet-popover-trigger " data-comet-popover="comet-popover-26633" aria-describedby="comet-popover-26633">No inset padding</button>
<div class="comet-popover comet-popover--bottom comet-popover--no-inset-padding" id="comet-popover-26633">
    <div class="comet-popover__nub"></div>
    <img src="/images/components/popovers/comet.jpg" />
</div>
                

Guidelines

  • Add overflow: auto to the popover if it contains content with a large height (i.e. a List Group) to add a scroll bar.
  • Apply text styles and internal spacing to content within a popover as needed.
  • Add the aria-describedby attribute to the target element for accessibility.

Use When

  • Displaying content associated with a particular element

Don’t Use When

  • Displaying a single line of text. Use Tooltips instead
  • Drawing attention to large amounts of content that require immediate attention. Use a modal instead.

Interaction

  • Popovers dismiss when there is a click anywhere outside the popover, when the target element blurred, or when the ESC key is pressed.
  • Popovers dismiss when another popover is opened.
  • Show only one popover on the page at a time.

Popovers adapt automatically to attempt to display fully visibly in the viewport. If a popover with the comet-popover--top variation is cut off by the top of the viewport, it will automatically appear as comet-popover--bottom.

I can shift to the bottom of the target element.

<button class="comet-button comet-button--ghost comet-popover-trigger js-comet-popover-trigger " data-comet-popover="comet-popover-52464" aria-describedby="comet-popover-52464">Scroll to top</button>
<div class="comet-popover comet-popover--top " id="comet-popover-52464">
    <div class="comet-popover__nub"></div>
    <p>I can shift to the bottom of the target element.</p>
</div>
                

Similarly, if a comet-popover--top or comet-popover--bottom overflows the side of the viewport, the popover automatically shifts to to a horizontally shifted variation.

Automatic horizontal shift

Class Reference

Class Applies to Outcome

.comet-popover

Any element

Base styles for popover.

.comet-popover-trigger

Any element

Establishes element as target element that popover is directed at.

.js-comet-popover-trigger

.comet-popover-trigger

Makes the popover trigger functional with JavaScript.

.comet-popover--top

.comet-popover

Displays popover centered above target element.

.comet-popover--bottom

.comet-popover

Displays popover centered below target element.

.comet-popover--left

.comet-popover

Displays popover centered to the left of the target element.

.comet-popover--right

.comet-popover

Displays popover centered to the right of the target element.

.comet-popover--top-right

.comet-popover

Displays popover above the target element and shifted right.

.comet-popover--top-left

.comet-popover

Displays popover above the target element and shifted left.

.comet-popover--bottom-right

.comet-popover

Displays popover below the target element and shifted right.

.comet-popover--bottom-left

.comet-popover

Displays popover below the target element and shifted left.

.comet-popover--left-top

.comet-popover

Displays popover to the left of the target element and shifted up.

.comet-popover--left-bottom

.comet-popover

Displays popover to the left of the target element and shifted down.

.comet-popover--right-top

.comet-popover

Displays popover to the right of the target element and shifted up.

.comet-popover--right-bottom

.comet-popover

Displays popover to the right of the target element and shifted down.

.comet-popover--no-inset-padding

.comet-popover

Displays popover with no inset padding.

.comet-popover--on-dark

.comet-popover

Displays popover that is more visible on a dark background.

Script Reference

  • Popovers are automatically activated on $(document).ready().
  • Call Comet.Popovers.initialize() to activate popovers added after the page loads.
  • show and hide events are debounced. If an event is fired immediately after another, it will be ignored.