SAPUI5中的弹出框，当鼠标指针超出弹出框时自动关闭答案

【问题标题】：Pop Over in SAP UI5, Autoclose when mouse pointer goes outside popoverSAPUI5中的弹出框，当鼠标指针超出弹出框时自动关闭
【发布时间】：2020-09-20 16:57:24
【问题描述】：

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

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

请帮帮我。

【问题讨论】：

您是否尝试过使用mouseleave 事件，其方式与Popover 文档中显示的click 事件相同？ sap.github.io/ui5-webcomponents/playground/components/Popover
你已经尝试了什么？请在问题中添加一些代码。
我猜你正在寻找的是作为工具提示的弹出框：stackoverflow.com/a/45490191/5846045。您还可以按照答案中的说明扩展TooltipBase。

标签： tooltip sapui5 mouseleave mouseout

【解决方案1】：

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

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

请注意，如果您在弹出窗口中触摸一个文本，这个已经关闭，但您会明白一般的想法。

【讨论】：