SAPUI5 使用 Popover 作为工具提示

Question

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

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

未捕获错误：无法从 ../controls/TooltipBaseRenderer.js 加载“myNewToolTip/controls/TooltipBaseRenderer.js”：404 - 未找到

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

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

• 可能有一种简单的方法可以使用弹出框作为工具提示，但我太愚蠢而无法弄清楚（请记住，我更愿意将其直接绑定在 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

无需创建自定义控件即可在鼠标悬停时显示弹出窗口。正如你所说，有一个更简单的方法：添加事件委托。

代表可以监听的事件之一可以通过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 设计指南中提到的，工具提示一般不应包含关键信息，因为它缺乏可发现性

工具提示 (...) 不应包含关键信息。它们也不应该包含冗余信息。

只是作为一个友好的提醒:)不要让人们悬停来寻找东西。