Creating an Auto-Closing Notification With an HTML Popover

The HTML popover attribute transforms parts into top-layer parts that may be opened and closed with a button or JavaScript. Most popovers might be light-dismissed, closing when the consumer clicks or faucets exterior the popup. At the moment, HTML popover lacks built-in auto-close performance, nevertheless it’s straightforward so as to add. Auto closing popups are helpful for consumer interfaces like banner notifications — the new-message alerts in telephones, as an illustration.

A image demo, is value a thousand phrases, proper? Click on on the “Add to my bookmarks” button within the following instance. It triggers a notification that dismisses itself after a set period of time.

Let’s begin with the popover

The HTML popover attribute is remarkably trivial to make use of. Slap it on a div, specify the kind of popover you want, and also you’re achieved.

Bookmarked!

A guide popover merely means it can’t be light-dismissed by clicking exterior the aspect. Because of this, we’ve got to cover, present, or toggle the popover’s visibility ourselves explicitly with both buttons or JavaScript. Let’s use a semantic HTML button.

  Add to my bookmarks

Bookmarked!

The popovertarget and popovertargetaction attributes are the ultimate two substances, the place popovertarget hyperlinks the button to the popover aspect and popovertargetaction ensures that the popover is present-n when the button is clicked.

Hiding the popover with a CSS transition

OK, so the problem is that we’ve got a popover that’s proven when a sure button is clicked, nevertheless it can’t be dismissed. The button is barely wired as much as present the popover, nevertheless it doesn’t cover or toggle the popover (since we’re not explicitly declaring it). We would like the popover to present when the button is clicked, then dismiss itself after a sure period of time.

The HTML popover can’t be closed with CSS, however it may be hidden from the web page. Including animation to that creates a visible impact. In our instance, we’ll cover the popover by eliminating its CSS top property. You’ll be taught in a second why we’re utilizing top, and that there are different methods you may go about it.

We are able to certainly choose the popover attribute utilizing an attribute selector:

[popover] {
  top: 0;
  transition: top cubic-bezier(0.6, -0.28, 0.735, 0.045) .3s .6s;

  @starting-style { 
    top: 1lh;
  }
}

When the popover is triggered by the button, its top worth is the one declared within the @starting-style ruleset (1lh). After the transition-delay (which is .6s within the instance), the top goes from 1lh to 0 in .3s, successfully hiding the popover.

As soon as once more, that is solely hiding the popover, not closing it correctly. That’s the following problem and we’ll want JavaScript for that stage of interplay.

Closing the popover with JavaScript

We are able to begin by setting a variable that selects the popover:

const POPOVER = doc.querySelector('[popover]');

Subsequent, we are able to set up a ResizeObserver that displays the popover’s measurement:

const POPOVER = doc.querySelector('[popover]');
const OBSERVER = 
  new ResizeObserver((entries) => {
    if(entries[0].contentBoxSize[0].blockSize == 0) 
      OBSERVER.unobserve((POPOVER.hidePopover(), POPOVER));
  });

And we are able to hearth that off beginning when the button to indicate the popover is clicked:

const POPOVER = doc.querySelector('[popover]');
const OBSERVER = 
  new ResizeObserver((entries) => {
    if(entries[0].contentBoxSize[0].blockSize == 0) 
      OBSERVER.unobserve((POPOVER.hidePopover(), POPOVER));
  });
doc.querySelector('button').onclick = () => OBSERVER.observe(POPOVER);

The observer will know when the popover’s CSS top reaches zero on the finish of the transition, and, at that time, the popover is closed with hidePopover(). From there, the observer is stopped with unobserve().

In our instance, top and ResizeObserver are used to auto-close the notification. You possibly can attempt some other CSS property and JavaScript observer mixture which may work along with your choice. Studying about ResizeObserver and MutationObserver might help you discover some choices.

Setting an HTML fallback

When JavaScript is disabled within the browser, if the popover kind is ready to any of the light-dismissible varieties, it acts as a fallback. Preserve the popover seen by overriding the fashion guidelines that cover it. The consumer can dismiss it by clicking or tapping wherever exterior the aspect.

If the popover must be light-dismissible solely when JavaScript is disabled, then embody that popover inside a

Bookmarked!

When to make use of this technique?

One other approach to implement all of this might be to make use of setTimeout() to create a delay earlier than closing the popover in JavaScript when the button is clicked, then including a category to the popover aspect to set off the transition impact. That method, no observer is required.

With the tactic lined on this submit, the delay might be set and triggered in CSS itself, due to @starting-style and transition-delay — no further class required! In case you favor to implement the delay by way of CSS itself, then this technique works finest. The JavaScript will catch as much as the change CSS makes on the time CSS defines, not the opposite method round.