Popovers

A popover is a non-modal UI panel paired with a trigger element such as a button or link. The popover is similar to the tooltip component but differs in that 1) it allows for more complex formatting and content structures (than a tooltip), and 2) is triggered on-click (versus on-hover).

Original LUCI popover component deprecated

The LUCI popover component was redesigned and rebuilt with release 2.6. In short, the new LUCI popover provides greater content and formatting flexibility.

Examples

Copied to clipboard

<div class="luci-popover">
    <button class="luci-button luci-button--secondary luci-popover__trigger" aria-expanded="false" aria-haspopup="true"> Basic Popover </button>
    <div class="luci-popover__wrapper" role="tooltip" aria-hidden="true">
        <div class="luci-popover__content luci-container--white">
            <div class="luci-popover__body">
                <h6 class="luci-popover__heading">This is a basic popover.</h6>
                <div class="luci-popover__description">The popover is a non-modal panel. It is similar to a tooltip but accommodates more content structures and variations than are possible with a tooltip.</div>
                <button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-popover__dismiss luci-button--with-icons">
                    <span class="luci-button__inner">
                        <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                            <use xlink:href="/icons/luci.svg#close"> </use>
                        </svg>
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>

Do’s and Don’ts

Pair popovers with a clickable UI element, for example a button.
Display the popover when the trigger UI element is clicked.
Close the popover when the trigger UI element is clicked again, when the user clicks outside the popover panel, when the user opens a different popover, or when the user presses the ESC key.

Allow more than one popover to be open at a time.

Popovers can contain actions. If a popover contains actions, focus should be given to the primary action, such as a primary button. The tab order should be as follows:

Subsequent secondary actions (for example a secondary button or Cancel)
Close or dismiss without taking action

Copied to clipboard

<div class="luci-popover">
    <button class="luci-button luci-button--secondary luci-popover__trigger" aria-expanded="false" aria-haspopup="true"> Popover with actions </button>
    <div class="luci-popover__wrapper" role="tooltip" aria-hidden="true">
        <div class="luci-popover__content luci-container--white">
            <div class="luci-popover__body">
                <h6 class="luci-popover__heading">This is a basic popover.</h6>
                <div class="luci-popover__description">The popover is a non-modal panel. It is similar to a tooltip but accommodates more content structures and variations than are possible with a tooltip.</div>
                <div class="luci-popover__footer">
                    <div class="luci-popover__footer-cell luci-popover__footer-cell--primary">
                        <button class="luci-button luci-button--primary luci-popover__action"> Continue </button>
                    </div>
                    <div class="luci-popover__footer-cell luci-popover__footer-cell--cancel">
                        <button class="luci-link luci-popover__action"> Cancel </button>
                    </div>
                </div>
                <button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-popover__dismiss luci-button--with-icons">
                    <span class="luci-button__inner">
                        <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                            <use xlink:href="/icons/luci.svg#close"> </use>
                        </svg>
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>

Popovers can contain form fields. If a popover contains form fields, focus should be given to the first form field displayed. The tab order should be as follows:

Subsequent form fields in the order they are displayed
Primary action (for example a primary button)
Subsequent secondary actions (for example a secondary button or Cancel)
Close or dismiss without taking action

Copied to clipboard

<div class="luci-popover">
    <button class="luci-button luci-button--secondary luci-popover__trigger" aria-expanded="false" aria-haspopup="true"> Popover with form field </button>
    <div class="luci-popover__wrapper" role="tooltip" aria-hidden="true">
        <div class="luci-popover__content luci-container--white">
            <div class="luci-popover__body">
                <h6 class="luci-popover__heading">This is a basic popover.</h6>
                <div class="luci-popover__description">The popover is a non-modal panel. It is similar to a tooltip but accommodates more content structures and variations than are possible with a tooltip.</div>
                <div class="luci-popover__description">
                    <input type="text" id="luci-input-92331" class="luci-form__input" placeholder="Enter an answer"> </div>
                <div class="luci-popover__footer">
                    <div class="luci-popover__footer-cell luci-popover__footer-cell--primary">
                        <button class="luci-button luci-button--primary luci-popover__action"> Continue </button>
                    </div>
                    <div class="luci-popover__footer-cell luci-popover__footer-cell--cancel">
                        <button class="luci-link luci-popover__action"> Cancel </button>
                    </div>
                </div>
                <button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-popover__dismiss luci-button--with-icons">
                    <span class="luci-button__inner">
                        <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                            <use xlink:href="/icons/luci.svg#close"> </use>
                        </svg>
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>

Positioning

Popovers can be positioned in many ways but are always visually anchored to the triggering element.

Center-Bottom (Default)

Copied to clipboard

<div class="luci-popover">
    <button class="luci-button luci-button--secondary luci-popover__trigger" aria-expanded="false" aria-haspopup="true"> Center-bottom position </button>
    <div class="luci-popover__wrapper" role="tooltip" aria-hidden="true">
        <div class="luci-popover__content luci-container--white">
            <div class="luci-popover__body">
                <h6 class="luci-popover__heading">This is a basic popover.</h6>
                <div class="luci-popover__description">The popover is a non-modal panel. It is similar to a tooltip but accommodates more content structures and variations than are possible with a tooltip.</div>
                <button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-popover__dismiss luci-button--with-icons">
                    <span class="luci-button__inner">
                        <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                            <use xlink:href="/icons/luci.svg#close"> </use>
                        </svg>
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>

Right-Bottom

Copied to clipboard

<div class="luci-popover luci-popover--right">
    <button class="luci-button luci-button--secondary luci-popover__trigger" aria-expanded="false" aria-haspopup="true"> Right-bottom position </button>
    <div class="luci-popover__wrapper" role="tooltip" aria-hidden="true">
        <div class="luci-popover__content luci-container--white">
            <div class="luci-popover__body">
                <h6 class="luci-popover__heading">This is a basic popover.</h6>
                <div class="luci-popover__description">The popover is a non-modal panel. It is similar to a tooltip but accommodates more content structures and variations than are possible with a tooltip.</div>
                <button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-popover__dismiss luci-button--with-icons">
                    <span class="luci-button__inner">
                        <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                            <use xlink:href="/icons/luci.svg#close"> </use>
                        </svg>
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>

Left-Bottom

Copied to clipboard

<div class="luci-popover luci-popover--left">
    <button class="luci-button luci-button--secondary luci-popover__trigger" aria-expanded="false" aria-haspopup="true"> Left-bottom position </button>
    <div class="luci-popover__wrapper" role="tooltip" aria-hidden="true">
        <div class="luci-popover__content luci-container--white">
            <div class="luci-popover__body">
                <h6 class="luci-popover__heading">This is a basic popover.</h6>
                <div class="luci-popover__description">The popover is a non-modal panel. It is similar to a tooltip but accommodates more content structures and variations than are possible with a tooltip.</div>
                <button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-popover__dismiss luci-button--with-icons">
                    <span class="luci-button__inner">
                        <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                            <use xlink:href="/icons/luci.svg#close"> </use>
                        </svg>
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>

Center-Top

Copied to clipboard

<div class="luci-popover luci-popover--top">
    <button class="luci-button luci-button--secondary luci-popover__trigger" aria-expanded="false" aria-haspopup="true"> Center-top position </button>
    <div class="luci-popover__wrapper" role="tooltip" aria-hidden="true">
        <div class="luci-popover__content luci-container--white">
            <div class="luci-popover__body">
                <h6 class="luci-popover__heading">This is a basic popover.</h6>
                <div class="luci-popover__description">The popover is a non-modal panel. It is similar to a tooltip but accommodates more content structures and variations than are possible with a tooltip.</div>
                <button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-popover__dismiss luci-button--with-icons">
                    <span class="luci-button__inner">
                        <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                            <use xlink:href="/icons/luci.svg#close"> </use>
                        </svg>
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>

Right-Top

Copied to clipboard

<div class="luci-popover luci-popover--right luci-popover--top">
    <button class="luci-button luci-button--secondary luci-popover__trigger" aria-expanded="false" aria-haspopup="true"> Right-top position </button>
    <div class="luci-popover__wrapper" role="tooltip" aria-hidden="true">
        <div class="luci-popover__content luci-container--white">
            <div class="luci-popover__body">
                <h6 class="luci-popover__heading">This is a basic popover.</h6>
                <div class="luci-popover__description">The popover is a non-modal panel. It is similar to a tooltip but accommodates more content structures and variations than are possible with a tooltip.</div>
                <button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-popover__dismiss luci-button--with-icons">
                    <span class="luci-button__inner">
                        <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                            <use xlink:href="/icons/luci.svg#close"> </use>
                        </svg>
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>

Left-Top

Copied to clipboard

<div class="luci-popover luci-popover--left luci-popover--top">
    <button class="luci-button luci-button--secondary luci-popover__trigger" aria-expanded="false" aria-haspopup="true"> Left-top position </button>
    <div class="luci-popover__wrapper" role="tooltip" aria-hidden="true">
        <div class="luci-popover__content luci-container--white">
            <div class="luci-popover__body">
                <h6 class="luci-popover__heading">This is a basic popover.</h6>
                <div class="luci-popover__description">The popover is a non-modal panel. It is similar to a tooltip but accommodates more content structures and variations than are possible with a tooltip.</div>
                <button class="luci-button luci-button--icon-only luci-button--flat luci-button--small luci-popover__dismiss luci-button--with-icons">
                    <span class="luci-button__inner">
                        <svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
                            <use xlink:href="/icons/luci.svg#close"> </use>
                        </svg>
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>

Accessibility

Ensure popovers can be opened and navigated using the keyboard. Pressing Enter or the spacebar on a popover trigger should open the popover.
Add an aria-haspopup="true" attribute on the trigger element.
Add an aria-expanded attribute to the trigger element that toggles between ="true" and ="false" to correspond with the popover state.
Add a role="tooltip" attribute to the luci-popover__wrapper element.
Add an aria-hidden attribute to the luci-popover__wrapper element that toggles between ="true" and ="false" to correspond with the popover state.

Class Reference

Class	Applies to	Outcome
`.luci-popover--is-open`	`.luci-popover`	Displays the popover content.
`.luci-popover--right`	`.luci-popover`	Positions the popover offset right.
`.luci-popover--left`	`.luci-popover`	Positions the popover offset left.
`.luci-popover--top`	`.luci-popover`	Positions the popover above the trigger element and centered. Combine with `.luci-popover--right` or `.luci-popover--left`.