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