OneTaskBy Tim King · Updated
Popover Builder
HTML Popover API Generator with Positioning
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Popover Builder works
A popover builder makes a small panel that opens next to a button with extra detail, help text or a
short form. It uses the native HTML popover attribute, so opening and closing need no script. Edit
the text, choose the position and copy the code.
The popover attribute puts the panel in the browser's top layer, above every other element, so it is
never clipped by a parent with overflow hidden or trapped under a higher z-index. The button's
popovertarget attribute opens and closes it, and the browser keeps the button's expanded state in
sync for screen readers.
How the popover builder positions the panel
A popover opens in the middle of the screen by default. The short script reads where the button is when the popover opens and places the panel just above or below it, keeping it inside the window, and moves it again if the page scrolls or the window is resized while it is open.
Light dismiss or manual
The "Click outside or Escape" option uses popover="auto", which closes when the visitor clicks
elsewhere or presses Escape, and closes other auto popovers when it opens. "Close button only" uses
popover="manual", which stays open until the close button or the trigger is pressed.
FAQ
Which browsers support the popover attribute?
Current versions of Chrome, Edge, Firefox and Safari all support it. In an older browser the button does nothing and the panel stays hidden, so put essential information in the page itself rather than only in a popover.
What is the difference between a popover and a tooltip?
A tooltip is a short label shown on hover or focus and cannot hold links or buttons. A popover opens on click, stays open while the visitor reads it and can hold headings, links and form fields, which makes it the right choice for anything interactive.
Should I use a popover or a modal dialog?
Use a popover for light, optional content that the visitor can ignore, and a modal <dialog> when
they must respond before carrying on, such as confirming a delete. A modal blocks the rest of the page;
a popover does not.
Can I use CSS anchor positioning instead of the script?
Yes, where it is supported. Give the button an anchor-name and the panel position-anchor with a
top: anchor(bottom) rule, and you can drop the script. Keep the script as a fallback until anchor
positioning works in every browser your visitors use.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
CSS Tooltip Generator
Pure CSS tooltips from a data attribute, with an arrow.
Hover Card Builder
Card hover effects with timing controls, previewed live.
Animated Dropdown
Build an accessible dropdown menu with a fade, slide or scale animation.
Mega Menu
Build an accessible full-width mega menu with link columns and a promo.
Off-Canvas Menu
Build an accessible slide-out side menu with an overlay and focus trap.