Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
Components/Popovers
Overlays

Popovers

Popovers patterns built with StyloftCSS and native HTML.

CSS only1 examplesKeyboard friendly HTML

Popover

A native popover supports toggling, Escape and light dismissal.

Live preview
About this component

Sample content. Escape or click outside to dismiss. No automatic timer or application event is wired to this example.

View HTML / PlaygroundHTML source
example.htmlHTML
<button type="button" class="sl-btn" popovertarget="ref-popover">Show popover</button>
<div class="sl-popover sl-stack" id="ref-popover" popover="auto">
  <div class="sl-cluster sl-justify-between">
    <strong>About this component</strong
    ><button
      type="button"
      class="sl-close"
      popovertarget="ref-popover"
      popovertargetaction="hide"
      aria-label="Dismiss About this component"
    >
      ×
    </button>
  </div>
  <p>
    Sample content. Escape or click outside to dismiss. No automatic timer or
    application event is wired to this example.
  </p>
</div>
HTML source · enable JavaScript for the playground19 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.