Tooltip not autohiding when exiting into iframe

3 posts, 0 answers
  1. Ron
    Ron avatar
    65 posts
    Member since:
    Oct 2010

    Posted 23 Jun Link to this post

    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. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2086 posts

    Posted 27 Jun Link to this post

    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.
  3. Ron
    Ron avatar
    65 posts
    Member since:
    Oct 2010

    Posted 27 Jun in reply to Konstantin Dikov Link to this post

    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

Back to Top