# popover="hint"

Status: Chrome 133, Firefox 149; Safari pendente (item do Interop 2026), não é Baseline.  
Fonte: https://caniuse.com/mdn-api_htmlelement_popover_hint and https://github.com/web-platform-tests/interop/blob/main/2026/README.md  
Página: https://designforai.dev/pt/css/popover-hint

Um popover da classe tooltip que não fecha popovers `auto` abertos e fecha quando outro hint abre. Com `popovertargetaction`, `interestfor` (Chrome) e anchor positioning, entrega tooltips nativos.

## 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: O Safari trata o valor desconhecido como `popover="manual"`; o tooltip ainda alterna a partir do botão.

## Prompt

Use `popover="hint"` em tooltips para eles não fecharem um menu aberto (`popover="auto"`), prenda-os ao gatilho com anchor positioning, e deixe o navegador gerenciar o empilhamento. Onde o suporte do Safari importar, o comportamento degrada para um popover manual, o que é aceitável.