Tooltip not working on a disable button

2 posts, 0 answers
  1. José Angel
    José Angel avatar
    8 posts
    Member since:
    Aug 2013

    Posted 21 Apr 2016 Link to this post

    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:

    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.

  2. Rosen
    Rosen avatar
    3253 posts

    Posted 25 Apr 2016 Link to this post

    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>


                   content: function(e) {                        
                        return $("tooltip");


    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top