-1

I have created a SAP UI5 Popover using Fragment. The fragment has XML code for opening the popover window.

My requirement is that when the popover is open and when the mouse pointer goes outside the popver (not mouse click outside), then the popover should close automatically.

Please help me with this.

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
Kardeepanr R
  • 1
  • 1
  • Have you tried to use the `mouseleave` event in the same way as shown in the documentation for Popover for `click` event? https://sap.github.io/ui5-webcomponents/playground/components/Popover/ – Palo Jun 05 '20 at 11:03
  • What have you tried already? Please add some code in the question. – Boghyon Hoffmann Aug 21 '20 at 12:48
  • I guess what you're looking for is a Popover as a tooltip: https://stackoverflow.com/a/45490191/5846045. You can also extend `TooltipBase` as explained in the answer. – Boghyon Hoffmann Aug 22 '20 at 09:42

1 Answers1

0

You can use so called "Event Delegates". See this little Demo:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="utf-8">
        <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
            data-sap-ui-libs="sap.m,sap.ui.layout,sap.f"
            data-sap-ui-theme='sap_fiori_3'></script>
        <script>

            var btn = new sap.m.Link({
                text:'Hello World',
                press: function(evt){
                    var pop = new sap.m.Popover({
                        title: "MyPopOver",
                        placement: "Bottom",
                        contentWidth: "200px",
                        content: [new sap.m.Text({text: "My Text"})]
                    })
                    pop.addEventDelegate({
                        onmouseout: function() {
                            pop.close()
                        }
                    }, this);
                    pop.openBy(evt.getSource());
                }
            });
            btn.placeAt('content');
        </script>
    </head>
    <body id="content" class="sapUiBody">
    </body>
</html>

Beware, this one already closes, if you touch a text inside the popup, but you'll get the generell idea.

A.vH
  • 881
  • 6
  • 10