Web Designer Wall

Snippets Dropdown

Bootstrap 5 Dropdown and Tooltips with CSS Anchor Positioning

An editor toolbar whose tooltips and dropdown menus are placed by CSS anchor positioning and the Popover API, flipping at screen edges with no positioning script. Browsers without anchor positioning get a working fallback.

Bootstrap 5 No jQuery Oct 2026 

<section class="wdw-stage">
  <div class="container" style="max-width:860px">
    <div class="wdw-card ap-card">
      <div class="ap-bar d-flex align-items-center gap-2 p-3 border-bottom" role="toolbar" aria-label="Formatting">
        <span class="ap-tip">
          <button type="button" class="ap-icon" aria-label="Bold" aria-pressed="false" aria-describedby="tip-bold" data-toggle-btn>
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 5h6a3.5 3.5 0 0 1 0 7H7zM7 12h7a3.5 3.5 0 0 1 0 7H7z"/></svg>
          </button>
          <span role="tooltip" id="tip-bold" class="ap-tooltip">Bold <kbd>Ctrl B</kbd></span>
        </span>
        <span class="ap-tip">
          <button type="button" class="ap-icon" aria-label="Italic" aria-pressed="false" aria-describedby="tip-italic" data-toggle-btn>
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 5h8M6 19h8M14 5l-4 14"/></svg>
          </button>
          <span role="tooltip" id="tip-italic" class="ap-tooltip">Italic <kbd>Ctrl I</kbd></span>
        </span>
        <span class="ap-tip">
          <button type="button" class="ap-icon" aria-label="Link" aria-describedby="tip-link">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg>
          </button>
          <span role="tooltip" id="tip-link" class="ap-tooltip">Add a link <kbd>Ctrl K</kbd></span>
        </span>
        <span class="ap-tip">
          <button type="button" class="ap-icon" aria-label="Comment" aria-describedby="tip-comment">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a8 8 0 0 1-11.5 7.2L4 20l1-4.5A8 8 0 1 1 21 12z"/></svg>
          </button>
          <span role="tooltip" id="tip-comment" class="ap-tooltip">Leave a comment</span>
        </span>

        <span class="ap-pop">
          <button type="button" class="btn btn-outline-secondary btn-sm rounded-pill ms-2 ap-trigger" popovertarget="insert-menu">
            Insert
            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
          </button>
          <div id="insert-menu" popover class="dropdown-menu ap-menu" aria-label="Insert">
            <button type="button" class="dropdown-item">Image</button>
            <button type="button" class="dropdown-item">Table</button>
            <button type="button" class="dropdown-item">Code block</button>
            <div class="dropdown-divider"></div>
            <button type="button" class="dropdown-item">Page break</button>
          </div>
        </span>

        <span class="flex-grow-1"></span>

        <button type="button" class="btn btn-primary rounded-pill px-4">Share</button>

        <span class="ap-pop ap-pop--end">
          <button type="button" class="ap-avatar ap-trigger" popovertarget="account-menu" aria-label="Account menu">MO</button>
          <div id="account-menu" popover class="dropdown-menu ap-menu" aria-label="Account">
            <div class="px-3 py-2">
              <div class="fw-bold">Maya Ortiz</div>
              <div class="small wdw-muted">[email protected]</div>
            </div>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Profile</a>
            <a class="dropdown-item" href="#">Billing</a>
            <a class="dropdown-item" href="#">Team settings</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item text-danger" href="#">Sign out</a>
          </div>
        </span>
      </div>

      <div class="p-4 p-md-5">
        <span class="wdw-eyebrow">Draft</span>
        <h1 class="wdw-heading h2 mt-1">Quarterly product update</h1>
        <p class="wdw-muted mb-3">Hover or focus a toolbar button to see its tooltip, then open Insert or the avatar. Move this card near the edge of a small window and the menus flip to stay on screen.</p>
        <div class="ap-lines" aria-hidden="true">
          <span></span><span></span><span></span>
        </div>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Related snippets

More dropdown snippets