Question

I’m basically trying to create little “What is this?” tooltips with jQuery.

Let’s say I have the following markup:

Account Type: <span class="what_trig permissions">Administrator</span>
<a class="what permissions">What is this?</a>

I want the following behaviour:

1. User hovers over the span
2. The anchor is faded in.
3. The user moves there mouse over to the anchor, and it remains shown.
4. They click it (I can do that bit!)
5. User mouses away from both the span and the anchor and the anchor disappears.

At the moment I can get the anchor to appear and disappear when they hover over the span, but how can I get it so it remains shown when they move their mouse over to the anchor?

Here is my jQuery hover logic:

$('.what_trig').hover(function() {
    var classes = $(this).attr('class').split(/\s+/);
    $.each(classes,function(index, item) {
        $('.what').each(function() {
            if ($(this).hasClass(item)) {
                $(this).fadeIn(100);
            }
        });
    });
    },
    function() {
        var classes = $(this).attr('class').split(/\s+/);
        $.each(classes,function(index, item) {
            $('.what').each(function() {
                if ($(this).hasClass(item)) {
                    $(this).fadeOut(100);
                }
            });
        });
    });

Answer 1

If it’s an option to add an extra span, I’d do it this way:

http://jsfiddle.net/qQTuE/

(add the hover functions to an outer span, so mouseOut isn’t triggered)