The HTML popover attribute turns elements into top-layer components that can be toggled open and closed using a button or JavaScript. Most popovers support light-dismiss behavior, meaning they close when the user clicks or taps outside of them. At the moment, HTML popover doesn’t include auto-close functionality by default, but it's simple to implement. Auto-closing popups are handy in interfaces like banner notifications — such as the message alerts on phones.

A picture demo, is worth a thousand words, right? Try clicking the “Add to my bookmarks” button in the example below. It will display a notification that automatically disappears after a certain time.

Starting with the popover

Using the HTML popover attribute is surprisingly straightforward. Just apply it to a div, define the type of popover you want, and you're all set.

<code>Bookmarked!</code>

A manual popover means it cannot be dismissed by clicking outside of it. Therefore, we must control its visibility manually — either through buttons or JavaScript. Let’s go with a semantic HTML button for this purpose.

<code>
  Add to my bookmarks

Bookmarked!</code>

The final two attributes needed are popovertarget and popovertargetaction. The popovertarget links the button to the popover element, while popovertargetaction ensures that clicking the button displays the popover.

Concealing the popover with CSS transitions

So far, we have a popover that appears when a button is clicked, but there’s no way to dismiss it yet. The button only triggers the popover to show — it doesn't hide or toggle it (since that action isn't explicitly defined). Our goal now is to make the popover appear when the button is pressed, then disappear automatically after some time.

While the HTML popover cannot be closed via CSS, it can certainly be hidden visually. Adding animation to this hiding process enhances the visual experience. In our case, we'll hide the popover by removing its height via CSS. Later, you’ll see why we chose height and how other methods might also work.

We can use an attribute selector to target the popover:

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

  @starting-style { 
    height: 1lh;
  }
}</code>

When the button activates the popover, the height starts at the value defined in the @starting-style block (1lh). After the transition-delay (.6s), the height animates from 1lh to 0 over .3s, effectively hiding the popover.

Keep in mind that this merely hides the popover visually, not closes it properly. That brings us to the next challenge, which requires JavaScript to fully manage.

Closing the popover using JavaScript

We begin by defining a variable to reference the popover:

<code>const POPOVER = document.querySelector('[popover]');</code>

Next, we set up a ResizeObserver to track changes in the popover's size:

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

This observer is triggered once the button that opens the popover is clicked:

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

Once the CSS transition completes and the popover’s height reaches zero, the observer closes the popover using hidePopover() and stops observing via unobserve().

In this example, we used height and ResizeObserver to achieve automatic closing of the notification. However, feel free to experiment with other CSS properties and JavaScript observers based on your preferences. Learning about ResizeObserver and MutationObserver may reveal more options for your specific use case.

Providing an HTML fallback

If JavaScript is disabled in the browser, and the popover type allows light-dismissal, it acts as a fallback. You can keep the popover visible by overriding the styles that hide it. This lets users dismiss it by clicking or tapping outside the popover area.

If the popover should only support light-dismiss when JavaScript is disabled, place it inside a element before the manual popover. The approach mirrors what we've done earlier — simply override the required CSS rules.

<code>
  Bookmarked!


Bookmarked!




    [popover] {
      transition: none;
      height: 1lh;
    }
</code>

When should this technique be applied?

An alternative method would involve using setTimeout() in JavaScript to delay closing the popover after the button click, and applying a class to trigger the transition effect. This eliminates the need for an observer.

However, the method discussed here enables the delay to be handled directly within CSS, thanks to @starting-style and transition-delay — without needing additional classes. This makes it ideal when you prefer managing delays purely through CSS. The JavaScript simply reacts to the timing defined in the CSS rather than controlling it.

The above is the detailed content of Creating an Auto-Closing Notification With an HTML Popover. For more information, please follow other related articles on the PHP Chinese website!