<div class="popover-wrap">
  <button class="btn btn-secondary" id="popTrigger" onclick="togglePopover()">
    More info
  </button>
  <div class="popover" id="popover" hidden>
    <div class="popover-arrow"></div>
    <h4 class="popover-title">What is this?</h4>
    <p class="popover-body">Popovers surface additional context without leaving the current view. Use them for definitions, quick actions, or inline help.</p>
    <a href="#" class="popover-link">Learn more →</a>
  </div>
</div>

<style>
.popover-wrap { position: relative; display: inline-block; }
.popover {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  width: 260px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 0.875rem;
  padding: 1rem; box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  z-index: 100;
  animation: popIn 0.15s cubic-bezier(0.16,1,0.3,1);
}
@keyframes popIn { from { opacity:0; transform:translateX(-50%) translateY(-4px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
.popover-arrow {
  position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px; background: var(--surface);
  border-top: 1px solid var(--border); border-left: 1px solid var(--border);
}
.popover-title { font-size: 0.875rem; font-weight: 600; margin: 0 0 0.375rem; }
.popover-body { font-size: 0.8125rem; color: var(--muted); line-height: 1.55; margin: 0 0 0.625rem; }
.popover-link { font-size: 0.8125rem; color: var(--accent); font-weight: 500; }
</style>

<script>
function togglePopover() {
  const p = document.getElementById('popover');
  p.hidden = !p.hidden;
}
document.addEventListener('click', e => {
  if (!e.target.closest('.popover-wrap')) {
    document.getElementById('popover').hidden = true;
  }
});
</script>