togglePopover

Description
Syntax
Examples
Links

Description

The togglePopover of HTMLElement for JS if the popover element is not showing, then this method shows it. Otherwise, this method hides it. This method returns true if the popover is open after calling it, otherwise false.

Syntax

element.togglePopover(options)

Parameters

options

toggle

Shows or hides the targeted popover element.

show

Shows the targeted popover element.

hide

Hides the targeted popover element.

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.togglePopover();
        }
        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 · false

<!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 =
            {
                force: false
            };
            const element = document.querySelector(`#${myparameter.currentTarget.myargument}`);
            element.togglePopover(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 = "";
            mydiv.textContent = `popover${mykey + 1}`;
        }
    </script>
</body>
</html>

3 · true

<!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 =
            {
                force: true
            };
            const element = document.querySelector(`#${myparameter.currentTarget.myargument}`);
            element.togglePopover(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 = "";
            mydiv.textContent = `popover${mykey + 1}`;
        }
    </script>
</body>
</html>

4 · toggle

<!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 =
            {
                force: "toggle"
            };
            const element = document.querySelector(`#${myparameter.currentTarget.myargument}`);
            element.togglePopover(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 = "";
            mydiv.textContent = `popover${mykey + 1}`;
        }
    </script>
</body>
</html>

5 · show

<!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 =
            {
                force: "show"
            };
            const element = document.querySelector(`#${myparameter.currentTarget.myargument}`);
            element.togglePopover(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 = "";
            mydiv.textContent = `popover${mykey + 1}`;
        }
    </script>
</body>
</html>

6 · hide

<!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 =
            {
                force: "hide"
            };
            const element = document.querySelector(`#${myparameter.currentTarget.myargument}`);
            element.togglePopover(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 = "";
            mydiv.textContent = `popover${mykey + 1}`;
        }
    </script>
</body>
</html>