The current state of Native Web Popover Elements

Native Web Popover Elements

Arguably the most reinvented family of elements/components web-wide and across all frameworks ever written, fall into the "popover" category. Think:

  • Tooltips
  • Cookie banners
  • Confirmation modals
  • Toast notifications
  • Dropdown menus


…and so on, including all of their respective subsets flavours. It's a fact that here at Gravitywell, practically every one of our web projects has dependencies on a number of third-party packages providing these kinds of elements, for use on our projects.

Whilst reaching for highly touted and popular packages assures us that they’ll meet a minimum level of quality and accessibility, the issue remains; inconsistency. Different implementations — across different libraries, across different frameworks — you find yourself having to remind or relearn.

It’d be great if such a ubiquitous family of elements could be standardised. And recently, the web started answering our cries.

Thank You GIF

The <dialog> element

Fresh off receiving excellent browser support in late 2022, the Dialog element gives developers a native "modal" style element. In short, a modal is a popover which is urgent and requires immediate interaction to continue or dismiss a flow, whilst rendering outside content non-interactive.

The pros of the native Dialog:

  • Fully customisable styling (defaults to very plain styling otherwise)
  • Always renders on top (brings an end to the eternal z-index fight)
  • Keyboard accessible & screen-reader friendly by default

It’s very important to note, however, the above example won’t exactly behave like a "modal", e.g. render other content inert. Developers will need to use Javascript methods to gain full modal behaviour. I presume this is to avoid bad/malicious intent by shady developers who would otherwise introduce dark patterns within markup on initial load, whereas Javascript is easier blocked when flagged as suspicious and won’t be run at all on the end user's machine.

With that noted, when exercising Javascript-driven control over a Dialog element (recommended), we are granted even more benefits:

  • Traps focus by default
  • Closes on ESCAPE keypress
  • Customisable backdrop styling

What’s great about the native Dialog modal is that they have a return value on their close event:

Notice we utilise the newer method=”dialog” attribute on the Form tag, whereby its "submit" event subsequently fires the Dialog’s "close" event.

The popup proposal

Still in proposal is the addition of either a Popup element or a Popup attribute. Popups and Dialogs are almost identical behaviourally, aside from the distinct difference that Popups are non-modal. This means they are non-blocking to a user's experience and can be "light-dismissed". An example of such an element would be a toast notification.

This feature is proposed and shepherded by the OpenUI organisation — a group aiming to standardise and trivialise the most common UI components used throughout the web. The group itself is governed in part by W3C (World Wide Web Consortium), the official standards organisation of the web.

Whilst work is still being done on the research and proposal, we cannot in earnest draw concrete conclusions about how the API will end up looking. However, it is highly likely (you would think) that much will be shared between the final deliverable and the already delivered Dialog element, e.g.:

  • Fully customisable styling - including backdrop
  • Keyboard accessible
  • Javascript show/hide methods


For full detail on the subject, I would be remiss to not point you towards the extensive work already written by Open UI here:

https://open-ui.org/components/popup.research

To summarise

Whilst we are not at the finish line with Popover elements, it seems to me that the overseers of the Web are certainly looking to keep pace with the industry, demonstrated by standardising the patterns being used in modern-day applications. Encouraged by a passionate community and organisations like Open UI, you don’t want to take your eye off what the Web will bring.

Watch this space.

Here at Gravitywell, we work with startups and scaleups to build innovative, sustainable tech businesses. If you’re interested in working with us, get in touch.

Written by Lewis Alderman (Front End Developer). Read more in Insights by Lewis or check our their socials ,