SAPUI5使用Popover作为工具提示

Question

我试图将sap.m.Popover用作＆＃34;丰富的工具提示＆＃34;对于一些控制。这符合SAP的建议，因为现在不推荐使用sap.ui.commons库。我们想要添加到标准字符串工具提示中的文本太多。我还没有找到直接使用popover作为工具提示的方法，这就是为什么我扩展了TooltipBase控件以处理popover。

我的popover工作正常，但是当我与我的控件交互时，我收到以下错误：

  

未捕获错误：无法加载＆＃39; myNewToolTip / controls / TooltipBaseRenderer.js＆＃39;来自../controls/TooltipBaseRenderer.js：404 - 未找到

我从这些threads看到，这是因为TooltipBase类是一个抽象类，因此没有渲染器。但是，因为我已经使用了popover，所以我不需要渲染任何东西。我尝试添加TooltipBaseRenderer.js，只有一个空的渲染类。但是UI5真的不喜欢这样。

我的问题是我应该怎么做，我看到两个选择：

• 可能有一种简单的方法可以使用popover作为工具提示，我很难弄清楚（记住，我更喜欢直接在XML视图中绑定它）。
• 找出一种抑制渲染器调用的方法，因为我不需要它。

这是我目前自定义控件的源代码：

sap.ui.define([
  "sap/m/Popover"
], function (Popover) {
  "use strict";

  return sap.ui.core.TooltipBase.extend("myNewToolTip.TooltipBase", {
    metadata: {
      properties: {
        title : {}
      },
      events: {
        "onmouseover" : {},
        "onmouseout" : {}
      }
    },

    oView: null,
    setView: function(view) {
      this.oView = view;
    },

    onmouseover : function(oEvent) {
      var that = this;
      if (!this.delayedCall){
        this.delayedCall = setTimeout(function() {
          if (!that.oPopover){
            that._createQuickView();
          }
        }, 500);
      }
    },

    onmouseout: function(oEvent) {
      if (this.oPopover){
        this.closePopover();
        this.delayedCall = undefined;
      }
      else{
        clearTimeout(this.delayedCall);
        this.delayedCall = undefined;
      }
    },

    _createQuickView: function() {
      var sTitle = this.getTitle();
      this.oPopover = new Popover({
        title: sTitle
      });
      this.oPopover.openBy(this.getParent());
    },

    closePopover: function(){
      this.oPopover.close();
      this.oPopover = undefined;
    }
  });
});

Answer 1

只需在鼠标悬停时显示弹出框即可创建自定义控件。如你所说，有一种更简单的方法：Adding event delegates。

其中一个events that delegates can listen to是onmouseover，可以这样实现：

this.byId("myTargetControl").addEventDelegate({
  onmouseover: function () {
    // Open popover here
  }
});

演示： https://embed.plnkr.co/jAFIHK

扩展sap.ui.core.TooltipBase

如果你仍然考虑扩展TooltipBase（没有Popover），请看一下示例： https://embed.plnkr.co/33zFqa?show=control/MyCustomTooltip.js,preview

请注意，工具提示通常不应包含关键信息，因为它缺乏可发现性Fiori Design Guideline mentions

  

工具提示（...）不应包含重要信息。它们也不应包含冗余信息。

就像友情提醒一样:)不要让人们盘旋找东西。