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

Tooltip not autohiding when exiting into iframe

2 Answers 165 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 1
Veteran
Ron asked on 23 Jun 2017, 01:45 PM

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>
 
 
   
  <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

Sort by
0
Konstantin Dikov
Telerik team
answered on 27 Jun 2017, 05:57 AM
Hi Ron,

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Ron
Top achievements
Rank 1
Veteran
answered on 27 Jun 2017, 07:57 AM

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

Tags
ToolTip
Asked by
Ron
Top achievements
Rank 1
Veteran
Answers by
Konstantin Dikov
Telerik team
Ron
Top achievements
Rank 1
Veteran
Share this question
or