【问题标题】：SAPUI5 using Popover as a tooltipSAPUI5 使用 Popover 作为工具提示
【发布时间】：2019-01-24 16:29:01
【问题描述】：

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

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

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

我从这些threads 看到这是因为 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;
    }
  });
});

【问题讨论】：

标签： sapui5

【解决方案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 缺乏可发现性，工具提示通常不应包含关键信息。

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

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

【讨论】：

扩展sap.ui.core.TooltipBase

扩展`sap.ui.core.TooltipBase`