SAPUI5 使用 Popover 作为工具提示

Question

我正在尝试使用 sap.m.Popover作为某些控件的“丰富工具提示”。这是根据 SAP 的建议，因为 sap.ui.commons 库现已弃用。我们想要添加到标准字符串工具提示中的文本太多。我还没有找到直接将弹出窗口用作工具提示的方法，这就是我扩展 TooltipBase 的原因控件来处理弹出框。

我的弹出窗口工作正常，但是当我与我的控件交互时，出现以下错误:

Uncaught Error: failed to load 'myNewToolTip/controls/TooltipBaseRenderer.js' from ../controls/TooltipBaseRenderer.js: 404 - Not Found

我从这些看到threads这是因为 TooltipBase 类是一个抽象类，因此没有渲染器。但是，因为我已经在使用弹出窗口，所以我不需要渲染任何东西。我试图添加 TooltipBaseRenderer.js 并且只有一个空的渲染类。但 UI5 也不喜欢那样。

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

• 可能有一种简单的方法可以将弹出框用作工具提示，我太笨了，想不出来(记住，我更愿意直接在 XML View 中绑定(bind)它)。
• 找出一种方法来抑制渲染器调用，因为我不需要它。

这是我当前的自定义控件源代码:

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

Tooltips (...) should never contain critical information. They should also not contain redundant information.

就像一个友好的提醒:)不要让人们徘徊寻找东西。