Tooltip not working on a disable button

[José Angel]

I've been trying to figure a workaround for this problem.

Recently I've discovered that kendo tooltip isn't working on disable buttons.

I've made an example to show you:

http://dojo.telerik.com/EZogO/5

when the tooltip button is enable, kendo's tooltip work fine. But, if you disable the button it will stop working. 

The problem is that this doesn't prevent the browser from showing his default tooltip.

Is there any solution?

Thanks in advance.

[Rosen]

Hello José Angel,

 

Unfortunately, the behavior you have described is caused by the browser not raising mouseenter events for disabled buttons. You can verify the by adding similar to the following code to the test page:

 

  $("#iconTextButton").on("mouseenter", function(e) {
             console.log("mouseenter", e.currentTarget);
         });

Note that the event handler is not executed when the button is disabled.

In order to workaround the browser tooltip from appearing, you may consider using a custom data attribute instead of the title attribute and set a content function to extract the text.

            <div class="demo-section k-content">
                <button id="iconTextButton" data-tooltip="Tooltip">Tooltip Button</button>
            </div>

 

    $("#iconTextButton").kendoTooltip({
               content: function(e) {                        
                    return $(e.target).data("tooltip");
                }
             });

 

Regards,
Rosen
Telerik