Brief Note on Popovers with Dialogs

This is not a comparison between popovers and dialogs, nor is it a discussion of support. This is me trying to get ahead of a potential issue for users when developers mix and match the patterns.

I will let this 32 second video explain:

The fake page is meant to mimic the stress of filling out a complex multi-step form while working against the clock. As the user hits a toggle-tip to get more information on a field, a dialog appears telling the user they will be logged out unless they hit the button.

But that time-extending button is hidden by the toggle-tip. When the user presses Esc to get rid of the toggle-tip, it closes the dialog. Which means the user cannot extend their time (and will be logged out, lose their work, and get frowny).

The problem does not occur when the dialog is implemented with the <dialog> element.

I urge you to consider not implementing popover in your project until all your modal dialogs are converted to native HTML <dialog> or you test overlapping interactions to ensure all is well. Ideally you are not implementing popover soon, but you may be scheduling projects a year or more out.

This example was recorded in Chrome Canary 115, so it is not final. Things may change.

Slightly Technical Bits

The dialog that uses <div role="dialog"> is borrowed from my 2020 post Dialog Focus in Screen Readers. As the post demonstrates, it was tested for accessibility and works as intended. It also uses the inert polyfill. I did not test if or how inert impacts this demo because, frankly, that is your job now.

Scott O’Hara provided guidance on using the native HTML <dialog> element earlier this year (January 2023) in his post Use the dialog element (reasonably).

The Google Chrome Developers blog published Introducing the popover API earlier this week (23 May). The post explains the difference between the popover manual dismiss and auto dismiss, both of which I use in the video. One will dismiss when the popover container loses focus and the other requires the user to manually trigger it.

In the video, neither popover dismiss method affects its interaction with <div role="dialog">. However, when using <dialog> with a popover with manual dismiss the popover container is stuffed behind the modal and does not block your view of the modal’s content. When the popover has auto (light, default) dismiss, then the popover self-dismisses when the <dialog> appears.

This embedded pen shows it in action. I did not make any effort to place the toggle-tips correctly. It was too much hassle. Either way, this only works in Chrome Canary as of this writing. You are welcome to play with the pen on your own, but those toggle-tips will not be where you want them with your viewport.

See the Pen Important Document Renewal Form by Adrian Roselli (@aardrian) on CodePen.

Recap

Given that <dialog> support is currently better than popover support, this should be no problem for a brand new project. Unless that brand new project is using crusty framworks / libraries or (per Scott’s guidance) <dialog> is not a fit for your audience.

For existing projects I understand there may be technical debt related to non-<dialog> code already in place. Probably don’t put any popover feature work on your development calendars until after the work to swap the existing dialogs with <dialog>.

Update: 6 June 2023

Hidde made a video that covers what I do above. If what I said did not land, maybe try Hidde’s video.