HTML popover

Introduction

You know what popover (popup) is, so feel free to skip this section. A popover or popup is a usually small window, which can appear in any place on the page, to provide the user with some information. Unlike the dialog, popover cannot be modal, it is always modeless, so usually the information, provided by the popup is less critical, than the one supplied by the dialog, and does not require user interaction. 
There are two ways to display popover(popup) using native HTML: declarative and JavaScript.

---

Declarative

Step 1
Declare a popover markup(please pay attention to the ID of the "div", "my_popover"):

 <div id="my_popover" popover>
    <h2>An HTML PopOver</h2>
    <button popovertargetaction="hide">Close</button>
 </div>

Step 2
Add a button with the attribute "popovertarget", as the value we will provide an ID of the "div" element with the "popover" attribute:

<button popovertarget="my_popover" popovertargetaction="show">
  Show popup
</button>

The "popovertarget", "popovertargetaction" and "popover"
The "popovertarget" binds between the button, which applies actions on the popover (like showing, hiding, etc.), and the "div", which will be used as a popover. 
The "popovertargetaction" declares the action should be applied on the popover as an "onclick" event of the button. The "popovertargetaction" may have the following values:
"show" - will show the popover
"hide" - will hide the popover
"toggle" - will toggle between the states "shown" and "hidden"

The "popover" attribute defines the behavior mode of the popover. There are two modes :
"auto" - the default value of the "popover" (when no value was provided) attribute and instructs the browser to hide the popup once a "click" event occurs outside of the popup ("popover")
"manual" - instructs the browser to hide the popup only if the dedicated action closes the popover ("hide" or "toggle"). Important: the popover, which has a "manual" behavior can coexist on the screen with other popovers, meaning it will not be closed automatically, by showing another popover.

---

Showing and closing popover using JavaScript

Step 1
Let's declare three functions: "show" - to show the popover, "close" - to hide the popover, and "toggle" - toggle the popover. As a parameter, all the functions will accept the id of the popover:

const show = (id) => {
     const popover = document.getElementById(id);
     popover.showPopover && popover.showPopover();
}

const close = (id) => {
     const popover = document.getElementById(id);
     popover.hidePopover && popover.hidePopover();
}

const toggle = (id) =>{
     const popover = document.getElementById(id);
     const popoverOpen = popover.togglePopover && popover.togglePopover();
}

Step 2
Let's add the popover div with the id "my_popover". The popover behavior will be declared as manual to demonstrate the toggling, otherwise, the popover will be hidden automatically once there is a click event anywhere outside the popover area

<div id="my_popover" popover="manual">
       <h2>An HTML PopOver 1</h2>
       <button autofocus>Send</button>
       <button  onclick="close('my_popover')">Close</button> 
 </div>

Step 3
Let's add two buttons: to show and toggle the popover. The close button appears in the popover itself
Show
Toggle

Styling

Positioning
Popover can be shown at every location on the screen. The "popover-open" pseudo-class can be used to specify the popover position and size. The next CSS snapshot assumes the popover has id "my_popover" from the examples above

 #my_popover:popover-open {
        width: 300px;
        height: 150px;
        position: absolute;
        bottom: 5px;
        right: 5px;
        margin: 0;
 }

The popover will be shown with a height of 150px and a width of 300px will be displayed in the bottom right corner of the browser

Backdrop
The "::backdrop" pseudo-element, as in the case of the "dialog" element, is a full-screen element placed behind the popover. In the following example, we will define a "::backdrop" element that will color the content behind the popover in an ugly purple color. Just as in the example above, we will assume, that the popover has the id "my_popover"

#my_popover::backdrop {
         background-color: #673ab752;
 }

---

Summary

Popover has been supported in all browsers since April 2024. It can be used in a declarative way and/or using JavaScript. Adding the "popover" attribute to the "div" element converts it to popover/popup. There are two modes popover can appear: "auto" - when it disappears once a click happens anywhere outside the popover, and "manual" - when the popover should be closed explicitly. The popover exposes an interface with three methods: "showPopover", "hidePopover" and "togglePopover"