Popovers

A popover is a non-modal UI panel. Use a popover when you need to display more than a basic tooltip, such as form elements, formatted text, links, etc.

States

Default

Copied to clipboard

<div class="luci-popover">
    <button class="luci-button luci-button--icon-only luci-button--small luci-popover__button 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#more"> </use>
            </svg>
        </span>
    </button>
    <div class="luci-popover__content">
        <div class="luci-popover__body">
            <ul class="luci-popover__list">
                <li class="luci-popover__list-item">
                    <a href="#" class="luci-link"> Edit Details </a>
                </li>
                <li class="luci-popover__list-item">
                    <a href="#" class="luci-link"> View History </a>
                </li>
                <li class="luci-popover__list-item">
                    <a href="#" class="luci-link"> Decomission </a>
                </li>
                <li class="luci-popover__list-item">
                    <a href="#" class="luci-link"> Add Attachments </a>
                </li>
                <li class="luci-popover__list-item">
                    <span> Not a Link </span>
                </li>
            </ul>
        </div>
    </div>
</div>

Do’s and Don’ts

Pair popovers with a clickable UI element (e.g., 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.

Accessibility

Ensure popovers can be opened and navigated using the keyboard. Pressing Enter or the spacebar on a popover trigger should open the popover and then pressing tab should change focus to the first element in the popover.