NetApp logo
LUCI Version 4.0.0

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 a popover 1) allows for more complex formatting and content structures than a tooltip, and 2) is triggered on-click (versus on-hover).

Examples

Basic Popover

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

Do

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

Don’t

  • Do not allow more than one popover to be open at a time.

Popover With Actions

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

Popover With Form Fields

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 which 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-17673" 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">
                    <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">
                    <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">
                    <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">
                    <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">
                    <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">
                    <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">
                    <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.