时间戳

首页 > 解决方案 > SAP UI5中的弹出窗口，当鼠标指针超出弹出窗口时自动关闭

tooltip - SAP UI5中的弹出窗口，当鼠标指针超出弹出窗口时自动关闭

问题描述

我使用 Fragment 创建了一个 SAP UI5 Popover。该片段具有用于打开弹出窗口的 XML 代码。

我的要求是，当弹出框打开并且鼠标指针移到弹出框之外（而不是鼠标点击外面）时，弹出框应该自动关闭。

请帮我解决一下这个。

标签： tooltipsapui5mouseleavemouseout

解决方案

您可以使用所谓的“事件代表”。看这个小演示：

<!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>

当心，这个已经关闭，如果你在弹出窗口中触摸一个文本，但你会得到通用的想法。

推荐阅读