Our design systems commonly feature components that show on top of other content: tooltips, date pickers, menus and teaching UI, to name just a few. Proposed updates to the web platform are about to make building these a whole lot easier. You might not even need JavaScript. In this talk, you’ll learn all about the upcoming ‘popover’ attribute, modality and the top layer.
This talk has been presented at JSNation 2023, check out the latest edition of this JavaScript Conference.
The HTML dialogue element is a pre-defined component in the HTML specification that allows the creation of modal or non-modal dialogues. It comes with built-in semantics through the 'dialogue' role and supports methods like 'showModal()' for modal dialogues and 'show()' for non-modal dialogues.
Popover attributes are new additions to HTML that enable the creation of overlay UI elements like form suggestions and teaching interfaces without JavaScript. You can add a 'popover' attribute to any element, assign it an ID, and link it with a 'popover-targets' attribute on a toggle button to control its visibility.
Modal dialogues restrict user interaction with other parts of the webpage, only allowing interaction with the dialogue itself. Non-modal dialogues, on the other hand, allow users to interact with other webpage elements while the dialogue is displayed, making them suitable for less disruptive notifications.
Popovers can be used for a variety of purposes such as explaining UI elements, offering form element suggestions, displaying content pickers, and integrating teaching UI. Examples include audio player instructions on The Economist or Excel integration prompts in Microsoft Teams.
Explicit dismiss requires an action, like pressing a button, to close the dialogue. Light dismiss happens automatically when a user interacts with other parts of the UI, such as scrolling away or clicking outside the dialogue area.
In CSS, the z-index property determines the stack order of elements that overlap. Both dialogues and popovers often use high z-index values or are placed in the top layer to ensure they appear above other page content, thus grabbing user focus.
Backdrops are visual elements that can obscure or dim out the background to highlight modal elements like dialogues, indicating that interaction with other parts of the application is temporarily unavailable. They can be styled with CSS using the '::backdrop' pseudo-element.
As of the last update, the popover attribute is supported in Stable Chrome and is being developed for other major browsers like Edge (based on Chromium), Safari (in tech preview), and Firefox.
I want to chat to you about dialogues and about popovers. The dialogue element and the popover attributes are two things that can help you with putting stuff on top of other stuff in the web. Dialogues have become accessibility-supported and can be used as modal or nonmodal dialogues. Popovers are a new set of behaviors that can be added to any element to create form element suggestions, content pickers, teaching UI, list boxes, and action menus. They work without JavaScript and can be easily created by adding the popover attribute to an element.
I want to chat to you about dialogues and about popovers. Now, we all know that the web used to be just linear, right? We had text and we had images. Increasingly, we like to put stuff on top of other stuff. I'm going to talk to you today about two things that can really help you with that, from the HTML specification.
One is the dialogue element that has been around for a while, and as of recently, it has become quite accessibility-supported as well. Then, secondly, the popover attributes, which is a brand-new attribute coming to the web. It has been put into Chrome just last week and stable Chrome. It is being developed in all of the other browsers as well.
One example of a popover is when you have a bit of UI and you want to explain it to your users. In this case, there's an article from The Economist. They have an audio player, and they show the user, you know, you can click this to listen to your article. You can do all sorts of things with popovers, like the other day when I was in a very serious business meeting and Microsoft Teams told me to use Excel integrations. That's something they do. They've also told me to be my expressive self, my expressive self, by using like an avatar. You can use popovers for all sorts of things. Slack does it slightly better by telling you you look nice when you hover over yourself. I prefer that to the previous one, to be honest.
Now let's look at the differences between dialogues and popovers, starting with the dialogue element. So dialogue is a HTML element, so I'm not talking about just any dialogue that you're building, but the actual element in HTML. It comes with the dialogue role, so semantics are built in, and it has a modal setting. Now the way you use it is in the script, so you can find the element in the DOM and then just call showModal on it. That shows it as a modal dialogue. And then you can also call show, which will do a nonmodal dialogue.
Now popover is a new set of behaviors that you can add to any element that you like. So it's an attribute that you add to an element in order to build things like form element suggestions, content pickers, teaching UI, list boxes, and action menus. And the cool thing about popover is that it works without JavaScript as well. The way you make a popover is basically by slapping the popover attribute onto any element that makes it a popover. Then you give it an ID and then you can point to that ID from a popover-targets attribute on a button. From that moment onward, that button becomes a toggler for your popover. So I've done a really ugly one in this screenshot, but basically you have the button, you have your div, and you can put whatever you like in there.
Popover can be controlled without JavaScript. Modal vs non-modal: modal blocks user interaction, non-modal allows other actions on the webpage. Dismissal methods include explicit dismiss and light dismiss. Layering with Z index controls element stacking. Top layer elements have a separate layer and can't be positioned relative to other elements. Backdrops draw attention and indicate modal status. Top layer elements come with a backdrop. Keyboard focused traps can be used in modals.
It becomes a popover that's controllable without JavaScript. Now, of course, you can also do it in JavaScript. So you can call the show popover method onto your element, and that is also going to show it. Then you can use that if you want to do timed popovers, like Microsoft Teams was doing on me, that one just appeared and disappeared at certain times.
Now, working on popover and dialogues and kind of learning about how they work, I had this question popping into my head, how are these patterns actually different? They seem quite similar. So I wanna take you through a couple of different axes on which they are indeed different.
One is modal versus non-modal. Now, modal means that an element, if it's modal, it is the only thing that the user can interact with. Everything else is blocked, so you cannot select text, you cannot tap, you cannot scroll, ideally. So anything else is impossible, you can just do the modal bits. That's useful when you've decided to track your users, and according to European law, you need to ask for consent. So if you do that, you probably want to use a modal, because you can't really place any cookies before you've asked the permission, and you also don't want your users to go on your website without tracking them, I guess, because that's your goal there.
Non-modal dialogs are things like menus in your applications, like this one, where you're editing an image, and you get some options for that image, or chat widgets that can pop up over your content. Now, they need to be dismissible easily, and it is important you can do other stuff on the webpage, like in this case, I can imagine people just want to go on with booking their trip, and they don't want to talk to you or chat, so you want to make that easy to dismiss. Talking about dismiss, there are different ways of dismissing. One is explicit dismiss, which is what happens when you have a button and you need to click that, or when a script actually removes it, and there is light dismiss, which is some kind of auto-magic dismiss. So when you're choosing a font in Google Docs, you get this list of fonts, but when you kind of start scrolling or you click outside of it, it just disappears. You don't need to do anything special to make it go away.
Then layering. We're probably all familiar with the Z index in CSS. It allows you to stack elements on top of each other and control the order in which that happens. So if you slap Z index one on one element and Z index two on the other, two is going to be above one because it's a higher number, and we've probably all seen very high numbers in our code bases. Now the cool thing about top layer is it happens on top of everything. So the Z indexing happens in your body, and you can see this as a layer that is separate from anything else in your body. It also means that you can't position anything relative to stuff that's not in the top layer.
Then backdrops, they can sometimes be useful to draw attention to certain elements, and for modal elements it also helps to show that they are modal and that the other stuff is currently not available. Top layer elements, they come with a backdrop for free in the browser, and you can style that with colon colon backdrop in your CSS, and you can then do stuff like change the color or add some blur or do all sorts of other things that CSS allows you to do. So that is very useful, and only happens with top layer elements specifically.
And then lastly there are keyboard focused traps. So when you're building a modal, you sometimes want to trap people inside of that modal.
Comments