popover="hint"
The popover="hint" global HTML attribute creates a popover that is subordinate to popovers with a popover="auto" attribute. You can use this to create tooltips that don't dismiss auto popovers. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The popover="hint" global HTML attribute creates a popover that is subordinate to popovers with a popover="auto" attribute. You can use this to create tooltips that don't dismiss auto popovers. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
api.HTMLElement.popover.hint | 133 | 133 | 149 | | 133 | |
html.global_attributes.popover.hint `hint` value | 133 | 133 | 149 | | 133 | |
Syntax
<button popovertarget="hint-pop">Help</button>
<div id="hint-pop" popover="hint">
<p>Additional information will be displayed here.</p>
</div>Live demo
Use cases
Control document behavior
Use popover="hint" to influence loading, metadata, or script behavior at the document level.
Tune performance strategy
Apply popover="hint" when earlier resource hints or document settings improve startup or runtime behavior.
Cautions
- Test popover="hint" in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Make sure popover="hint" supports the intended task without making the page harder to perceive, understand, or operate.
Related links
Powered by web-features