Say hello to native popovers in HTML…
Without a line of JavaScript!
The Popover API lets you create smooth popups using just HTML and CSS.
With the popover attribute, you can define elements that behave like tooltips, modals, or popups.
Combine it with the popovertarget and popovertargetaction attributes, and you’ve got full control over when and how the popover opens or closes.
Why use it?
- Clean, semantic HTML structure.
- No JavaScript needed
- Full accessibility baked in (no extra ARIA attributes required).
- Native browser support for interactions like open/close states.
Bonus: It is supported by 90% of the browsers so far. So it is pretty safe to use!
Checkout the codepen: https://codepen.io/theosoti/pen/ZENpowe
The Popover API is ideal for lightweight overlays attached to a trigger context. Keep dismissal paths obvious with Escape and close controls, so keyboard and touch interactions feel equally reliable.
The Popover API is ideal for lightweight overlays tied to a trigger context. Keep dismissal paths explicit with Escape and close controls for reliable keyboard and touch behavior.
Check autofill, mobile keyboards, and error feedback before shipping. These practical states reveal more than static demos and keep the form experience trustworthy.
A practical way to adopt popover is to scope it to one high-impact component first. This keeps implementation predictable and prevents style drift as the codebase grows.
For critical actions, include a clear close button inside the popover so dismissal remains obvious even without keyboard input.
If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.
Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!