Kendo button title attribute ignored when button is disabled

[Vedad]

Hi,

I have the kendo ui angular button in my form. Due to multiple languages and options within the form, button text is sometimes too big to fit, so we are using ellipsis. But we still want user to be able to see full text when it brings mouse over it, so we are using title attribute to display full text.

Naturally, depending on various parameters button is disabled.

However, if the button is disabled, title attribute is ignored and not shown. 

Is this a bug or it is intentional behavior? (regular html button without kendo displays it normally).

Thank yo and regards,

Vedad

 

[Georgi]

Hi Vedad, 

Thank you very much for the details provided.

Indeed, you are correct that setting the disabled property of the generic HTML button to true would still allow the developer to display a tooltip when the user hovers the button. 

In general, the Kendo UI for Angular Button has additional styling that comes from the Kendo Themes. This involves setting the CSS pointer-events property to none when the component has been disabled using its built-in disabled property. In fact, this is the reason why the tooltip would not appear when the user hovers over a disabled button. 

What I would suggest in order to overwrite this default behavior of the component would be to use some custom CSS and set the pointer-events property to auto: 

.k-button:disabled{
    pointer-events: auto;
}

For further reference about this approach, please check out the following Knowledge Base article: 

https://www.telerik.com/kendo-angular-ui/components/knowledge-base/disabled-element-tooltip/

I hope the provided information helps. Please, let me know if I can further assist you with this case. 

Regards,
Yanmario
Progress Telerik

[Vedad]

Hi Yanmario, 

thank you for pointing me to this solution. In the meantime, I solved problem on slightly different way which I like little bit more. Playing with kendo based css has backfired heavily after breaking changes (in one of previous versions) for styling and classes in multiple widgets. 

However, my solution is (in case someone needs it): I wrap kendoButton within parent div which has title property. Basically, regardless of the status of button, this div will show the title..

That's all. :)
Thank you very much for the help.

Regards,

Vedad