jQuery Tooltip remains open if it's on a link within an iframe (in FF & IE)

Question

I'm replacing the standard "Reset your password" text link with a help' icon, but I discovered that when a jQuery Tooltip is on a link within an iframe, it remains open once the link is clicked until the parent page is refreshed.

I'm using inline frames, but I also experienced the same problem when linking to another page. I tried moving the title inside a <span> tag, as well as closing the iframe and opening a new one with the functions below, but the tooltip just remains open on the page.

UPDATE - I created a fiddle to demonstrate the problem http://jsfiddle.net/chayacooper/7k77j/2/ (Click on 'Reset Link'). I experience the problem in both Firefox & IE (it's fine in Chrome & Safari).

HTML

<a href="#inline_form" class="fancybox_inline" title="Forgot Your Password?"><img src="help.jpg"></a>

Functions to close iframe and open new iframe

function close_iframe() {
    parent.jQuery.fancybox.close();
     }

function open_iframe() {
    $.fancybox.open([{href:'reset_password.html'}], { type:'iframe'           
         });
     }

I am using jquery-1.8.2, jquery-ui-1.9.1 and fancyapps2

Answer 1

Could be an incompatibility or bug between the fancybox and the jQueryUI tooltip.

Essentially, the fancybox is showing the second form but the browser is not seeing the mouseout event. You can check this by adding a callback function to the .close() event of the jQueryUI tooltip.

$('a[href="#inline_form1"]').tooltip({
    close: function( event, ui ) {
      console.log('closing')
    }
})

You should be able to see closing in the console in IE, Firefox and Chrome when the mouse moves out of the "Reset Link" anchor. However, when clicking "Reset Link" in Chrome you see the closing log line again but in IE9 it does not appear again. So the browser is missing the event.

We can work around this by manually calling .tooltip('close') when "Reset Link" is clicked, like this:

$('a[href="#inline_form1"]').on('click', function() {
  $(this).tooltip('close')
})

There is a small problem with the way in which the tooltips are created which means that with just the above click handler it will error with

Uncaught Error: cannot call methods on tooltip prior to initialization; attempted to call method 'close'

This seems to be caused by using the $(document).tooltip() method which uses event delegation for all elements with a title attribute. This is the simplest way of creating tooltips for all elements so I understand why this is used but it can add unnecessary events and handling to the whole page rather than targeting specific elements. So looking at the error it is telling us that we need to explicitly create a tooltip on the element we want to call 'close' on. So need to add the following initialisation

$('a[href="#inline_form1"]').tooltip();

Sp here is the completed JavaScript

$(function () {
    $(".fancybox").fancybox({
      title: ''
    })

    $(".fancybox").eq(0).trigger('click')

    $(document).tooltip();
    $('a[href="#inline_form1"]').tooltip()

     $('a[href="#inline_form1"]').on('click', function() {
       $(this).tooltip('close')
    })
})

Note: You only need one jQuery document.ready wrapping function - the $(function (){ ... }) part :-)