Popover

Native [popover] surface — no positioning library, no script.

Source: src/stylus/components/popover.styl

Default

The popovertarget attribute does the work; the browser handles the top layer and light dismiss. Put .popover-trigger on the control so the panel anchors beneath it.

Cascade layers

Everything ships inside @layer skeletonic.*.

Override any token without a specificity fight.
<button type="button" class="button secondary sm popover-trigger" popovertarget="doc-popover">Open popover</button>
<div id="doc-popover" popover class="popover">
  <div class="popover-header">
    <h4 class="popover-title">Cascade layers</h4>
    <p class="popover-description">Everything ships inside <code>@layer skeletonic.*</code>.</p>
  </div>
  <div class="popover-body">Override any token without a specificity fight.</div>
</div>