Popover & Tooltip

Lightweight popovers using the native HTML Popover API and pure CSS tooltips without JavaScript dependencies.

Native Popover

Uses native popover and popovertarget attributes. Dismisses automatically when clicking outside or pressing Esc.

Example Code

<button type="button" popovertarget="demo-popover">
  Toggle Popover
</button>

<div id="demo-popover" popover>
  <h4>Native Popover</h4>
  <p>This popover is rendered in the top layer using native HTML attributes.</p>
  <button type="button" popovertarget="demo-popover" popovertargetaction="hide" class="btn-small">
    Close
  </button>
</div>

CSS Tooltip

Add data-tooltip="text" to any element to display a tooltip on hover or keyboard focus.

Hover for info

Example Code

<div style="display: flex; gap: 1.5rem; align-items: center; margin-top: 1.5rem;">
  <button type="button" class="btn-secondary" data-tooltip="Save your current progress">
    Save Changes
  </button>

  <span data-tooltip="Additional context information">
    Hover for info
  </span>
</div>