showPopover

Description
Syntax
Examples
Links

Description

The showPopover of HTMLElement for JS shows the popover element by adding it to the top layer. If element's popover attribute is in the auto state, then this will also close all other auto popovers unless they are an ancestor of element according to the topmost popover ancestor algorithm.

Syntax

element.showPopover(options)

Parameters

options

auto

Closes other popovers when opened; has light dismiss and responds to close requests.

manual

Does not close other popovers; does not light dismiss or respond to close requests.

hint

Closes other hint popovers when opened, but not other auto popovers; has light dismiss and responds to close requests.

Examples

1 · void

<!doctype html>
<html>
<head>
    <style>
        :popover-open
        {
            background-color: transparent;
        }
        #myid1::backdrop
        {
            background-color: rgb(255 0 0 / 0.5);
        }
        #myid2::backdrop
        {
            background-color: rgb(255 255 0 / 0.5);
        }
        #myid3::backdrop
        {
            background-color: rgb(0 0 255 / 0.5);
        }
    </style>
</head>
<body>
    <button></button>
    <button></button>
    <button></button>
    <div></div>
    <div></div>
    <div></div>
    <script>
        function myfunction(myparameter)
        {
            const element = document.querySelector(`#${myparameter.currentTarget.myargument}`);
            element.showPopover();
        }
        for(const [mykey, mybutton] of document.querySelectorAll("button").entries())
        {
            mybutton.textContent = `button${mykey + 1}`;
            mybutton.addEventListener("mouseover", myfunction);
            mybutton.myargument = `myid${mykey + 1}`;
        }
        for(const [mykey, mydiv] of document.querySelectorAll("div").entries())
        {
            mydiv.id = `myid${mykey + 1}`;
            mydiv.popover = "";
            mydiv.textContent = `popover${mykey + 1}`;
        }
    </script>
</body>
</html>

2 · auto

<!doctype html>
<html>
<head>
    <style>
        :popover-open
        {
            background-color: transparent;
        }
        #myid1::backdrop
        {
            background-color: rgb(255 0 0 / 0.5);
        }
        #myid2::backdrop
        {
            background-color: rgb(255 255 0 / 0.5);
        }
        #myid3::backdrop
        {
            background-color: rgb(0 0 255 / 0.5);
        }
    </style>
</head>
<body>
    <button></button>
    <button></button>
    <button></button>
    <div></div>
    <div></div>
    <div></div>
    <script>
        function myfunction(myparameter)
        {
            const options =
            {
                source: "auto"
            };
            const element = document.querySelector(`#${myparameter.currentTarget.myargument}`);
            element.showPopover(options);
        }
        for(const [mykey, mybutton] of document.querySelectorAll("button").entries())
        {
            mybutton.textContent = `button${mykey + 1}`;
            mybutton.addEventListener("mouseover", myfunction);
            mybutton.myargument = `myid${mykey + 1}`;
        }
        for(const [mykey, mydiv] of document.querySelectorAll("div").entries())
        {
            mydiv.id = `myid${mykey + 1}`;
            mydiv.popover = "auto";
            mydiv.textContent = `popover${mykey + 1}`;
        }
    </script>
</body>
</html>

3 · manual

<!doctype html>
<html>
<head>
    <style>
        :popover-open
        {
            background-color: transparent;
        }
        #myid1::backdrop
        {
            background-color: rgb(255 0 0 / 0.5);
        }
        #myid2::backdrop
        {
            background-color: rgb(255 255 0 / 0.5);
        }
        #myid3::backdrop
        {
            background-color: rgb(0 0 255 / 0.5);
        }
    </style>
</head>
<body>
    <button></button>
    <button></button>
    <button></button>
    <div></div>
    <div></div>
    <div></div>
    <script>
        function myfunction(myparameter)
        {
            const options =
            {
                source: "manual"
            };
            const element = document.querySelector(`#${myparameter.currentTarget.myargument}`);
            element.showPopover(options);
        }
        for(const [mykey, mybutton] of document.querySelectorAll("button").entries())
        {
            mybutton.textContent = `button${mykey + 1}`;
            mybutton.addEventListener("mouseover", myfunction);
            mybutton.myargument = `myid${mykey + 1}`;
        }
        for(const [mykey, mydiv] of document.querySelectorAll("div").entries())
        {
            mydiv.id = `myid${mykey + 1}`;
            mydiv.popover = "manual";
            mydiv.textContent = `popover${mykey + 1}`;
        }
    </script>
</body>
</html>

4 · hint

<!doctype html>
<html>
<head>
    <style>
        :popover-open
        {
            background-color: transparent;
        }
        #myid1::backdrop
        {
            background-color: rgb(255 0 0 / 0.5);
        }
        #myid2::backdrop
        {
            background-color: rgb(255 255 0 / 0.5);
        }
        #myid3::backdrop
        {
            background-color: rgb(0 0 255 / 0.5);
        }
    </style>
</head>
<body>
    <button></button>
    <button></button>
    <button></button>
    <div></div>
    <div></div>
    <div></div>
    <script>
        function myfunction(myparameter)
        {
            const options =
            {
                source: "hint"
            };
            const element = document.querySelector(`#${myparameter.currentTarget.myargument}`);
            element.showPopover(options);
        }
        for(const [mykey, mybutton] of document.querySelectorAll("button").entries())
        {
            mybutton.textContent = `button${mykey + 1}`;
            mybutton.addEventListener("mouseover", myfunction);
            mybutton.myargument = `myid${mykey + 1}`;
        }
        for(const [mykey, mydiv] of document.querySelectorAll("div").entries())
        {
            mydiv.id = `myid${mykey + 1}`;
            mydiv.popover = "hint";
            mydiv.textContent = `popover${mykey + 1}`;
        }
    </script>
</body>
</html>