Syllabus

On this page

CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays

Badar KhalilUpdated September 30, 2026 6 min read

Tooltips vs popovers

A tooltip is a small text hint that appears when an element is hovered or focused. A popover is a larger floating panel that can contain links, buttons, forms or rich content, and is opened by an explicit action such as a click. Choosing the right one is the most important design decision, because each has different accessibility rules.

Focus keyword: CSS tooltips and popovers. Related trending keywords: Popover API, popovertarget, anchor positioning, position-area, top layer, light dismiss, toggletip, @starting-style popover animation, WCAG 1.4.13.

When to use which

Tooltip: short, non-essential, text-only supplementary info for a control (for example the name of an icon button). Never put interactive content inside a tooltip.
Toggletip: a click-activated small message, good for help icons. Content is announced with a live region.
Popover: rich or interactive content like menus, filters, profile cards and date pickers.
Dialog: modal content that needs a decision. It blocks the page, unlike a popover.

Show on hover and keyboard focus, not hover only.
Connect it with aria-describedby and give the tooltip role='tooltip'. For icon buttons, the name should usually come from aria-label and the tooltip is an extra visual.
WCAG 1.4.13 Content on Hover or Focus: the extra content must be dismissible (Escape closes it without moving pointer or focus), hoverable (the pointer can move onto it without it disappearing) and persistent (it stays until dismissed or no longer relevant).
Do not put essential information only in a tooltip, since touch users cannot hover.

The HTML popover attribute turns any element into a popover that is shown in the top layer, so it is never clipped by overflow: hidden and does not need z-index. Connect a button with popovertarget='id'; no JavaScript is required.

popover (same as popover='auto'): light dismiss (click outside or press Escape closes it) and only one auto popover is open at a time.
popover='manual': no light dismiss, you control opening and closing. Good for toasts.
Methods: showPopover(), hidePopover(), togglePopover(). Events: beforetoggle and toggle.
Style the open state with :popover-open and the backdrop with ::backdrop.
The browser provides focus return and basic accessibility, but you still need a good trigger label and meaningful content.

Animating popovers

Because popovers change between display: none and shown, animate them with @starting-style and transition-behavior: allow-discrete: set transition: opacity .25s, transform .25s, overlay .25s allow-discrete, display .25s allow-discrete;. Define the closed style on [popover], the open style on :popover-open, and the starting style inside @starting-style.

CSS anchor positioning

Anchor positioning lets you attach a floating element to another element in pure CSS, replacing JavaScript positioning libraries in many cases. Give the trigger anchor-name: --tip; on the popover use position: fixed; position-anchor: --tip; position-area: top; (or bottom, left, right, top span-right). Use position-try-fallbacks: flip-block so it flips when there is no room. Because support is still growing, treat it as progressive enhancement: wrap it in @supports (position-anchor: --a) and keep a simple fallback position.

Best practices

Keep tooltip text short (under about 80 characters).
Provide sufficient contrast and a pointer arrow only if it adds clarity.
Do not cover the trigger itself or important nearby content.
Respect prefers-reduced-motion.
Test with keyboard only, a screen reader and on touch devices.

Quick summary

Use tooltips for short, non-essential hints with hover and focus support, toggletips for click-activated help, and the Popover API plus anchor positioning for rich floating panels. That gives accessible CSS tooltips and popovers with very little JavaScript.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 80px 40px; }
  .tip { position: relative; display: inline-block; }
  .tip button { padding: 10px 16px; border: 0; border-radius: 10px; background: #4f46e5; color: #fff; font: 600 15px system-ui; cursor: pointer; }
  .tip button:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
  .tip [role='tooltip'] { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); padding: 8px 12px; background: #0f172a; color: #fff; font-size: 13px; border-radius: 8px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s, visibility .15s; }
  .tip [role='tooltip']::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #0f172a; }
  .tip:hover [role='tooltip'], .tip:focus-within [role='tooltip'] { opacity: 1; visibility: visible; transform: translateX(-50%); }
  /* WCAG 1.4.13: Escape dismisses */
  .tip.dismissed [role='tooltip'] { opacity: 0; visibility: hidden; }
  @media (prefers-reduced-motion: reduce) { .tip [role='tooltip'] { transition: none; } }
</style>
<span class='tip' id='tip'>
  <button aria-describedby='t1'>Hover or focus me</button>
  <span role='tooltip' id='t1'>Saves your work to the cloud</span>
</span>
<script>
  var tip = document.getElementById('tip');
  document.addEventListener('keydown', function (e) { if (e.key === 'Escape') tip.classList.add('dismissed'); });
  tip.addEventListener('mouseleave', function () { tip.classList.remove('dismissed'); });
  tip.addEventListener('focusout', function () { tip.classList.remove('dismissed'); });
</script>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 30px; }
  .open-btn { padding: 10px 18px; border: 0; border-radius: 10px; background: #0f766e; color: #fff; font: 600 15px system-ui; cursor: pointer; }
  [popover] { padding: 18px; border: 0; border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.25); max-width: 280px; }
  [popover] h3 { margin: 0 0 6px; }
  [popover] p { margin: 0 0 12px; color: #475569; }
  [popover] button { padding: 8px 14px; border: 0; border-radius: 8px; background: #e2e8f0; cursor: pointer; }
</style>
<button class='open-btn' popovertarget='pop'>Open popover</button>
<div id='pop' popover>
  <h3>Hello popover</h3>
  <p>No JavaScript needed. Press Escape or click outside to close (light dismiss).</p>
  <button popovertarget='pop' popovertargetaction='hide'>Close</button>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 30px; }
  .open-btn { padding: 10px 18px; border: 0; border-radius: 10px; background: #7c3aed; color: #fff; font: 600 15px system-ui; cursor: pointer; }
  #menu { padding: 16px 20px; border: 0; border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.25); opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .25s, transform .25s, overlay .25s allow-discrete, display .25s allow-discrete; }
  #menu:popover-open { opacity: 1; transform: none; }
  @starting-style { #menu:popover-open { opacity: 0; transform: translateY(12px) scale(.96); } }
  #menu::backdrop { background: rgba(15,23,42,0); transition: background-color .25s, overlay .25s allow-discrete, display .25s allow-discrete; }
  #menu:popover-open::backdrop { background: rgba(15,23,42,.35); }
  @starting-style { #menu:popover-open::backdrop { background: rgba(15,23,42,0); } }
  @media (prefers-reduced-motion: reduce) { #menu, #menu::backdrop { transition: none; } }
</style>
<button class='open-btn' popovertarget='menu'>Animated popover</button>
<div id='menu' popover>
  <strong>Quick actions</strong>
  <p style='margin:8px 0 0'>Animated with @starting-style and allow-discrete.</p>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 120px 40px; }
  .anchor-btn { anchor-name: --help; padding: 10px 18px; border: 0; border-radius: 10px; background: #0ea5e9; color: #fff; font: 600 15px system-ui; cursor: pointer; }
  .pop { margin: 0; inset: auto; padding: 12px 16px; border: 0; border-radius: 12px; background: #0f172a; color: #fff; max-width: 240px; box-shadow: 0 12px 30px rgba(0,0,0,.3); }
  /* Progressive enhancement: position next to the trigger in CSS */
  @supports (position-anchor: --help) {
    .pop { position: fixed; position-anchor: --help; position-area: top; margin-bottom: 10px; position-try-fallbacks: flip-block; }
  }
</style>
<button class='anchor-btn' popovertarget='p'>Anchored popover</button>
<div class='pop' id='p' popover>Positioned with CSS anchor positioning. It flips below when there is no room above.</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 40px; }
  .wrap { position: relative; display: inline-block; }
  .help { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #4f46e5; background: #fff; color: #4f46e5; font-weight: 800; cursor: pointer; }
  .help:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
  .bubble { position: absolute; left: 0; top: calc(100% + 8px); width: 240px; padding: 10px 14px; background: #eef2ff; color: #1e1b4b; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.15); font-size: 14px; }
  .bubble:empty { display: none; }
</style>
<div class='wrap'>
  <button class='help' id='h' aria-label='More information about passwords'>?</button>
  <div class='bubble' id='b' role='status' aria-live='polite'></div>
</div>
<script>
  var h = document.getElementById('h'), b = document.getElementById('b');
  h.addEventListener('click', function () { b.textContent = b.textContent ? '' : 'Use at least 12 characters with a mix of words.'; });
  document.addEventListener('keydown', function (e) { if (e.key === 'Escape') b.textContent = ''; });
  document.addEventListener('click', function (e) { if (!h.contains(e.target)) b.textContent = ''; });
</script>

Output

Press Run to execute.

Exercise: Make a WCAG 1.4.13 compliant tooltipHTML

Finish the tooltip so it shows on hover and on keyboard focus, is connected with aria-describedby, stays visible when the pointer moves onto the tooltip (hoverable) and closes when Escape is pressed (dismissible).

Try it Yourself HTML

<style>
  .tip { position: relative; display: inline-block; margin: 60px; }
  .tip [role='tooltip'] { position: absolute; bottom: 100%; left: 0; padding: 6px 10px; background: #0f172a; color: #fff; border-radius: 6px; font-size: 13px; visibility: hidden; }
  /* TODO: show on hover and focus-within; keep hoverable; hide on Escape via class */
</style>
<span class='tip'>
  <button>Info</button>
  <span role='tooltip' id='tt'>Helpful extra detail</span>
</span>
<script>
  // TODO: aria-describedby and Escape handler
</script>

Output

Press Run to execute.

Show expected output

The tooltip shows on hover and focus, remains visible while the pointer is over it, and disappears when Escape is pressed.

This is a self-check — compare your result with the expected output above.

Was this page helpful?

CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays

Tooltips vs popovers

When to use which

Tooltip accessibility rules

The Popover API

Animating popovers

CSS anchor positioning

Best practices

Quick summary