SAPUI5 使用 Popover 作为工具提示 [英] SAPUI5 using Popover as a tooltip

问题描述

我正在尝试使用

---

扩展sap.ui.core.TooltipBase

如果您仍考虑扩展 TooltipBase(不带 Popover)，请查看此示例:

---

但请记住，工具提示通常不应包含关键信息，因为它缺乏可发现性，如 Fiori 设计指南提及

<块引用>

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

友情提示:)不要让人们悬停寻找东西.

I'm trying to use the sap.m.Popover as a "rich tooltip" for some controls. This is as per recommendation from SAP because the sap.ui.commons library is now deprecated. We have too much text we want to add to the standard string tooltip. I haven't figured out a way to use the popover directly as a tooltip, which is why I've extended the TooltipBase control to handle the popover.

I've got the popover working fine, However when I interact with my control, I get the following error:

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

I see from these threads that it is because the TooltipBase class is an abstract class and therefore doesn't have a renderer. However, because I'm already using the popover, I don't need to render anything. I've tried to add the TooltipBaseRenderer.js and just have an empty render class. But UI5 really doesn't like that either.

My question is what should I do, I see two options:

• There is probably a simple way to use the popover as a tooltip, which I'm just too stupid to figure out (Bear in mind, I'd prefer to bind it directly in the XML view).
• Figure out a way to suppress the renderer call as I don't need it.

This is my current source code for the custom control:

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;
    }
  });
});

解决方案

There is no need to create a custom control just to display a popover on mouseover. As you said, there is a simpler way: Adding event delegates.

One of the events that delegates can listen to is onmouseover which can be achieved like this:

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

Demo: https://embed.plnkr.co/jAFIHK

---

Extending sap.ui.core.TooltipBase

If you still consider extending TooltipBase (without Popover), take a look at this example: https://embed.plnkr.co/33zFqa?show=control/MyCustomTooltip.js,preview

---

Keep in mind, though, that tooltips in general shouldn't contain critical information due to its lack of discoverability as Fiori Design Guideline mentions

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

Just as a friendly reminder :) Don't make people hover to find things.

这篇关于SAPUI5 使用 Popover 作为工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！