popover="hint"

Chrome 133, Firefox 149; Safari ausstehend (Interop-2026-Punkt), nicht Baseline.

Chrome 133Edge 133Safari noFirefox 149

Ein Popover der Tooltip-Klasse, das offene `auto`-Popover nicht schließt und sich schließt, wenn ein anderer Hint öffnet. Mit `popovertargetaction`, `interestfor` (Chrome) und Anchor Positioning ergibt das native Tooltips.

Saves the draft (Ctrl+S)

CSS

.fx-042-btn {
  anchor-name: --fx-042;
  padding: 8px 14px;
  font: 600 14px system-ui
}
.fx-042 {
  position-anchor: --fx-042;
  position-area: top;
  inset: auto;
  margin: 0 0 6px;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: #111;
  color: #fff;
  font: 12px system-ui
}
.fx-042 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<button class="fx-042-btn" popovertarget="fx-042-tip">Save</button>
<div id="fx-042-tip" popover="hint" class="fx-042">Saves the draft (Ctrl+S)</div>

Fallback: Safari behandelt den unbekannten Wert als `popover="manual"`; der Tooltip lässt sich weiterhin über den Button umschalten.

Quelle: caniuse.com/mdn-api_htmlelement_popover_hint and https://github.com/web-platform-tests/interop/blob/main/2026/README.md

Prompt

Nutze `popover="hint"` für Tooltips, damit sie ein offenes Menü (`popover="auto"`) nicht schließen, hefte sie mit Anchor Positioning an den Auslöser und lass den Browser das Stacking verwalten. Wo Safari-Unterstützung zählt, degradiert das Verhalten zu einem manuellen Popover, was akzeptabel ist.