Question

I’m running a simple jQuery hint tool on my form. My issue is that the hint is set to go away when the user clicks away from the input field (on blur). When a user clicks a link inside the hint box, they are “blurring” the input field, so the box goes away before following the link, so the link never gets followed.

Edit: Here’s a jFiddle showing my issue with code http://jsfiddle.net/9pJvp/

The core jQuery code looks like this:

$(":input").focus(function() {
    $(this).parent().find("span:nth-child(4)").css('display','inline');
})
$(":input").blur(function() {
    $(this).parent().find("span:nth-child(4)").css('display','none');
})

An example form code that applies this looks like this (the hint is all styled up with css):

<tr class="form_row">
    <td class="required_label">
        Example Label:
    </td>
    <td class="input_field">
        <input type="checkbox" value="1" name="blah" />
        <div style="display: inline;"></div>
        <span class="validation_message"></span>
        <span class="hint">
            Blah blah blah <a href="http://www.google.com">heres a link.</a>
            <span class="hint-pointer"></span>
        </span>
    </td>
</tr>

I’ve tried adding the following (and variations of it) both INSIDE the .blur(function() { and outside it, but neither one works. Any suggestions? Thank you!

$("a").click(function() {
        e.preventDefault(); 
        e.stopPropagation();
    });

Answer 1

Based on your jsfiddle:

$(document).ready(function() {
    var timer = null;
    $(".input_field input, .input_field a").focus(function() {
        var self = this;
        setTimeout(function(){
            $(self).closest(".input_field").find("span:nth-child(4)").css('display','inline');
        },3);
    }).blur(function() {
        var self = this;
        timer = setTimeout(function(){
            $(self).closest(".input_field").find("span:nth-child(4)").css('display','none');
        }, 2);
    }).filter("a").bind("focus mousedown", function(e){
        var self = this;
        clearTimeout(timer);
        setTimeout(function(){
            clearTimeout(timer);
            self.focus();
        }, 1);
    });

});

Fiddle: http://jsfiddle.net/9pJvp/3/

It is a bit of a hack and there is probably a better way.

You may have to increase the setTimeout intervals to 15, 30, and 45 (or higher) – I haven’t tested much and am not too sure if all browsers will fire them in the right order (Chrome does).