Hi,
I have attached a tooltip to a button. Next to the button is an iframe. When hovering the button, the tooltip shows. But when exiting the button area (slowly) into the iframe area, the tooltip often fails to autohide. Any ideas on why this is happening and how to fix this?
I have created a simple dojo example but since I cannot save it ("Failed to create snippet"), I have attached it in this post.
Regards,
Ron
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Untitled</title> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css"> <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="http://kendo.cdn.telerik.com/2017.2.621/js/angular.min.js"></script> <script src="http://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"></script> <script src="http://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script></head> <script> $(function () { $('#button').kendoButton().kendoTooltip({ content: 'This is the tooltip' }); }); </script><body> <div id="button">BUTTON</div><div style="vertical-align: top; display: inline-block;"><iframe style="border: 1px solid black"></iframe></div> <div>Hover the button and slowly move the mouse into the iframe area</div> </body></html>
2 Answers, 1 is accepted
A possible workaround for this would be to add a margin between the button and the iframe:
As for the issue, it seems that when a Tooltip is initialized over a Button, the mouseout event does not fire when the mouse is moved from the button directly over an iframe.
Regards,
Konstantin Dikov
Progress Telerik
Rank 1
Veteran
Hi Konstantin,
Thank you for finding the source of the problem and figuring out a workaround. I will see if I can incorporate this workaround in my UI.
Looking a bit further into the mouseout event not getting called, it seem like it's not the iframe that is causing the problem. If the button is covered by any absolute positioned element, the event doesn't get called either. In my UI some of the buttons are partially covered by such an absolute positioned element as part of an expandable side-menu. So adding a margin there is not going to be straight forward but I think I can make it work somehow.
Regards,
Ron