title: SAPUI5 using Popover as a tooltip
body: <p>I'm trying to use the <a href="https://openui5.hana.ondemand.com/#docs/api/symbols/sap.m.Popover.html" rel="nofollow noreferrer">sap.m.Popover</a> 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 <a href="https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.core.TooltipBase.html" rel="nofollow noreferrer">TooltipBase</a> control to handle the popover. </p>
  
  <p>I've got the popover working fine, However when I interact with my control, I get the following error:</p>
  
  <blockquote>
    <p>Uncaught Error: failed to load 'myNewToolTip/controls/TooltipBaseRenderer.js' from ../controls/TooltipBaseRenderer.js: 404 - Not Found</p>
  </blockquote>
  
  <p>I see from these <a href="https://stackoverflow.com/questions/41544509/tooltipbaserenderer-js-404-not-found">threads</a> 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.</p>
  
  <p>My question is what should I do, I see two options:</p>
  
  <ul>
  <li>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).</li>
  <li>Figure out a way to suppress the renderer call as I don't need it.</li>
  </ul>
  
  <p>This is my current source code for the custom control:</p>
  
  <pre><code>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;
      }
    });
  });
  </code></pre>