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.

Popover to be deprecated and rebuilt with release 2.5 (October, 26, 2018)

If you are currently using the popover in your application, we recommend switching over to the menu component which is similar to the current version of LUCI popovers, or you can replace your popover code with the new version in the next release of LUCI. Note that the markup, styles, examples, and guidelines for the new version of popovers will be markedly different than what is currently provided.

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