# popover="hint"

Status: Chrome 133, Firefox 149; Safari pending (Interop 2026 item), not Baseline.  
Source: https://caniuse.com/mdn-api_htmlelement_popover_hint and https://github.com/web-platform-tests/interop/blob/main/2026/README.md  
Page: https://designforai.dev/css/popover-hint

A tooltip-class popover that does not close open `auto` popovers and closes when another hint opens. With `popovertargetaction`, `interestfor` (Chrome) and anchor positioning it gives native tooltips.

## HTML

```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>
```

## CSS

```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; }
```

Fallback: Safari treats the unknown value as `popover="manual"`; the tooltip still toggles from the button.

## Prompt

Use `popover="hint"` for tooltips so they do not dismiss an open menu (`popover="auto"`), anchor them to the trigger with anchor positioning, and let the browser manage stacking. Where Safari support matters, the behaviour degrades to a manual popover, which is acceptable.