Hi,
I am using Kendo tooltip and below is the scenario
I have button with tooltip applied. When button is in disabled state it is showing browser tooltip instead of Kendo. When button got enabled it is working as per expectation.
Below is the screenshot for same.
1) Screenshot 1 - Browser Tooltip
2) Screenshot 2- Kendo Tooltip
Is there any way to resolve this issue? It should show kendo tooltip whether button is enabled or disabled.
Regards,
Parag
3 Answers, 1 is accepted
0
Hello, Parag,
Thank you for the details.
I made tests an noticed that a disabled button does not fire events and the Tooltip depends on onMouseOver:
https://stackblitz.com/edit/react-ougy7e?file=app/main.js
I will investigate this, as when a disabled element does not fire events, we have to check if there is another option to handle this.
I will keep you updated.
Regards,
Stefan
Progress Telerik
Thank you for the details.
I made tests an noticed that a disabled button does not fire events and the Tooltip depends on onMouseOver:
https://stackblitz.com/edit/react-ougy7e?file=app/main.js
I will investigate this, as when a disabled element does not fire events, we have to check if there is another option to handle this.
I will keep you updated.
Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Parag
Top achievements
Rank 1
Rank 1
answered on 10 Feb 2019, 12:37 AM
Thanks for the reply.
0
Hello, Parag,
After long research, I noticed that this is a common case and it is connected to the browsers and how the events are fired. There are no events that will be fired over a disabled element and we have no control over this.
I can suggest a workaround in this case.
Instead of setting the disabled attribute use the k-state-disabled class provided by KendoReact, this will add a look of a disabled element. As it will also stop the event, a CSS will be needed to enable them:
As this visually disabled element will have a click event, inside the handler, check if it has the "k-state-disabled" class, and execute the logic only if it does not:
This is an example:
https://stackblitz.com/edit/react-ougy7e-ww13ea?file=app%2Fmain.js
Regards,
Stefan
Progress Telerik
After long research, I noticed that this is a common case and it is connected to the browsers and how the events are fired. There are no events that will be fired over a disabled element and we have no control over this.
I can suggest a workaround in this case.
Instead of setting the disabled attribute use the k-state-disabled class provided by KendoReact, this will add a look of a disabled element. As it will also stop the event, a CSS will be needed to enable them:
.k-state-disabled { pointer-events: auto}As this visually disabled element will have a click event, inside the handler, check if it has the "k-state-disabled" class, and execute the logic only if it does not:
handleClick = (e) => { if(Array.from(e.target.classList).includes('k-state-disabled')){ console.log("This is disabled, do not handle click") }}This is an example:
https://stackblitz.com/edit/react-ougy7e-ww13ea?file=app%2Fmain.js
Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items