There was a time when adding a tooltip, floating panel, or contextual menu meant reaching for a JavaScript library. Not anymore.
The popover HTML attribute is now part of Baseline 2025, which means it is supported across all modern evergreen browsers. In practical terms: you can use it in production without worrying about browser compatibility.
This is one of those rare features that is:
- Simple
- Powerful
- Accessible by default
- And requires little to no JavaScript
Let’s look at how it works, when to use it, and what to watch out for — including a real-world example you can drop straight into a form.
What Is the popover Attribute?
The popover attribute allows you to create floating UI elements that are connected to a trigger element.
These can be:
- Context menus
- Help panels
- Tooltips with richer content
- Small interactive overlays
And you can do it with native HTML.
The Simplest Example
<button popovertarget="info">
More Info
</button>
<div id="info" popover>
<p>This is additional information shown in a popover.</p>
</div>
The button uses popovertarget to point to an element with the popover attribute. When clicked, the popover toggles automatically.
No JavaScript required.
The Simplest Example - Demo
Real-World Example: A Help Tooltip in a Form
Let’s say you are building a settings form and want to explain what an API key is — without cluttering the interface.
<form>
<div class="form-group">
<label for="api-key">
API Key
<button
type="button"
class="help-icon"
popovertarget="api-help"
aria-label="What is an API key?"
>
?
</button>
</label>
<input type="text" id="api-key" name="api-key" />
<div
id="api-help"
popover
class="help-popover"
>
<p>
Your API key is provided by your service provider.
It authenticates your website when making requests.
Keep it private and do not share it publicly.
</p>
</div>
</div>
</form>
Basic Styling
.help-icon {
margin-left: 0.5rem;
border: none;
background: #eee;
border-radius: 50%;
width: 1.5rem;
height: 1.5rem;
cursor: pointer;
}
.help-popover {
max-width: 260px;
padding: 0.75rem;
border-radius: 6px;
border: 1px solid #ccc;
background: #fff;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.help-popover:popover-open {
animation: fadeIn 0.15s ease-in;
}Why this is better than using the title attribute:
- Supports rich content (paragraphs, links, formatting)
- Works with keyboard users
- Properly announced by assistive technologies
- Closes automatically when clicking outside
- Requires no custom JavaScript
Demo 1 using popover
Positioning Popovers Relative to the Button
By default, popovers appear relative to the viewport. As you can see with demo 1 this is usually in the center of the screen. With the new CSS Anchor Positioning standard (2026 Evergreen), you can now anchor the popover directly to its trigger element.
In our API key example from above we can use CSS anchors with the same markup to create a more intuitive experience for users. In this example the “?” button now shows the help tooltip right next to the button,
Demo 2 using popover and css anchors
Controlling the Behaviour
The default behaviour is for the popover to be toggled on/off but if you have a use case you can manually set it to show or hide.
<button popovertarget="menu" popovertargetaction="show">Open</button>
<button popovertarget="menu" popovertargetaction="hide">Close</button>
<div id="menu" popover>
<p>Menu content</p>
</div>
Available actions:
toggle(default)showhide
You can also control it programmatically:
document.getElementById('menu').showPopover();
document.getElementById('menu').hidePopover();When Should You Use It?
Good Use Cases
- Field-level help in forms
- “More info” panels
- Action menus (edit, delete, etc.)
- Inline contextual settings
- Compact dashboards
Not Ideal For
- Large modal workflows
- Complex multi-step forms
- Full-screen overlays
If it feels like a modal dialog, consider using <dialog> instead.
Accessibility Out of the Box
When we say it is “accessible out of the box”, we mean:
- It participates correctly in the accessibility tree
- Keyboard interaction works automatically
- Focus behaves predictably
- Clicking outside closes it
- Screen readers are informed of state changes
You should still:
- Provide meaningful labels
- Use appropriate roles (e.g.
role="tooltip"orrole="dialog")
Note: This demo does not set a role to simplify the demo and avoid a css conflict with Cassiopeia - Ensure content is concise and helpful
Auto vs Manual Popovers
By default, popovers are auto popovers. That means:
- Only one auto popover is open at a time
- Opening another closes the previous one
- Clicking outside closes it
You can opt into manual mode:
<div id="panel" popover="manual">
...
</div>Manual popovers:
- Do not auto-close
- Can have multiple open at once
- Must be controlled with JavaScript
Gotchas to Be Aware Of
1. Not a Replacement for Everything
Popover is best for small contextual UI. If you need strict focus trapping and full modality, use <dialog>.
2. Positioning Expectations
Default positioning works well, but it may not match pixel-perfect design requirements without CSS adjustments.
3. Top Layer Behaviour
Popovers render in the top layer.
- They are not clipped by
overflow: hidden - They are not constrained by parent stacking contexts
This is usually helpful — but can surprise you if you expect normal DOM layering.
4. No Built-in Animations
There are no default animations. Use the :popover-open pseudo-class to add transitions.
Final Thoughts
The popover attribute feels small, but it has a big impact.
- It removes boilerplate.
- It removes unnecessary JavaScript.
- It improves accessibility.
- It simplifies UI patterns that used to be awkward to build.
And now that popover is Baseline 2025 and anchor positioning is in 2026 Evergreen, there is no reason not to use it.
Sometimes the best solution really is the one built into the browser.
