This is a migrated thread and some comments may be shown as answers.

Tooltip not working on a disable button

2 Answers 1171 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
José Angel
Top achievements
Rank 1
José Angel asked on 21 Apr 2016, 01:50 PM

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.

2 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 25 Apr 2016, 07:06 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mikkel
Top achievements
Rank 1
Iron
answered on 24 Feb 2025, 11:48 AM | edited on 24 Feb 2025, 12:54 PM

Hello Rosen,

 

I encountered the same issue today, and I must day, I do not agree with your response here - check out this Dojo example, showing that normal HTML buttons in fact do show their title when disabled:

https://dojo.telerik.com/WiCJhLCh

It would be greatly appreciated if Kendo UI Button would follow the standards with regards to this - it is indeed very useful to show the user why the button is disabled.

PS: Your code example doesn't seem to work (anymore).


Best regards
Mikkel

Neli
Telerik team
commented on 26 Feb 2025, 09:02 AM

Hi Mikkel,

Thank you for your feedback.

Indeed, the tooltip does not show over Kendo Button due to the styles applied to the '.k-disabled' class. With the latest version you can overcome this behavior using the following style:

 

<style>
      .k-disabled {
        pointer-events: auto !important;
      }
    </style>

Here you will find the modified example: https://dojo.telerik.com/ZvgQalRk 

Regards,

Neli

Tags
ToolTip
Asked by
José Angel
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Mikkel
Top achievements
Rank 1
Iron
Share this question
or