sapui5 - Extending sap.ui.core.Icon with hover event or mouseover

Question

I extended sap.ui.core.Icon with hover event handling:

    sap.ui.define(function () {
    "use strict";
    return sap.ui.core.Icon.extend("abc.reuseController.HoverIcon", { 
            metadata: {
                events: {
                    "hover" : {}  
                }
            },

//          the hover event handler, it is called when the Button is hovered - no event registration required
            onmouseover : function(evt) {   
                this.fireHover();
            },

//          add nothing, just inherit the ButtonRenderer as is
            renderer: {}            
        });  
});

The event onmouseover is never fired. I also used this extension for sap.m.Button and it works. But I need this for sap.ui.core.Icon.

I also tried this jquery example but it did not work at all.

$("testIcon").hover(function(oEvent){alert("Button" + oEvent.getSource().getId());});

Please, do you have any idea why event handler onmouseover is not called for sap.ui.core.Icon? Or can you propose some other solution?

Bellow is how I added icon to my sap.suite.ui.commons.ChartContainer:

        var oFilterIcon = new HoverIcon({   
                tooltip     : "{i18n>filter}",
                src         : "sap-icon://filter",
                hover       : function(oEvent){alert("Button" + oEvent.getSource().getId());},
            });

        this.byId("idChartContainer").addCustomIcon(oFilterIcon);   

Answer 1

This is my analysis:

1. Your new custom Control Icon for hover is correct. If you will use it independently it will work correctly .
2. However, your custom control will not work as your icons are converted to sap.m.OverflowToolbarButton when you use ChartContainer.

I looked into the source code of Chart Container and below is the code:

sap.suite.ui.commons.ChartContainer.prototype._addButtonToCustomIcons = function(i) {
    var I = i;
    var s = I.getTooltip();
    var b = new sap.m.OverflowToolbarButton({
        icon: I.getSrc(),
        text: s,
        tooltip: s,
        type: sap.m.ButtonType.Transparent,
        width: "3rem",
        press: [{
            icon: I
        }, this._onOverflowToolbarButtonPress.bind(this)]
    });
    this._aCustomIcons.push(b);
}

So, you Icon is not used but its properties are used. As this is standard code, your hover code of Custom icon is not passed along.

One solution will be to add the onmouseover to sap.m.OverflowToolbarButton :

sap.m.OverflowToolbarButton.prototype.onmouseover=function() {
 alert('hey')

};

However, this is dangerous as all OverflowToolbarButton button start using this code and I will not recommend it.

Next solution would be to overwrite the private method:_addButtonToCustomIcons ( again not recommendred :( )

sap.suite.ui.commons.ChartContainer.prototype._addButtonToCustomIcons = function(icon) {
            var oIcon = icon;
            var sIconTooltip = oIcon.getTooltip();
            var oButton = new sap.m.OverflowToolbarButton({
                icon : oIcon.getSrc(),
                text : sIconTooltip,
                tooltip : sIconTooltip,
                type : sap.m.ButtonType.Transparent,
                width : "3rem",
                press: [{icon: oIcon}, this._onOverflowToolbarButtonPress.bind(this)]
            });
            this._aCustomIcons.push(oButton);


            //oButton.onmouseover.
            oButton.onmouseover = function() {
                this.fireHover();
            }.bind(oIcon);
        };

Let me know if this helps u. :)