[jQuery] Any HTML tags inside of tooltip cause basic tooltip to close on hover.

Question

Hi.

I'm new to jQuery, in fact any kind of AJAX / JavsScript (although not new to PHP, xHTML and CSS). Anyway I'm trying to achieve a "tooltip-like" effect, where I can hover over a div...the new div fades in above it and then when I exit the div the "tooltip" fades out.

So here's the basic jQuery I've managed to scrap together reading the odd guide here and there:

$(function()
{
    $('#sn-not-logged-in').hover(function()
    {
        $('#sn-not-logged-in-hover').fadeIn('medium');
    });

    $('#sn-not-logged-in-hover').mouseout(function()
    {
        $('#sn-not-logged-in-hover').fadeOut('medium');
    });

});

Problem is if I put "any" html tag inside the div that hovers in, the second you roll over it the div fades back out.

Any ideas how this can be fixed?

Cheers.

Answer 1

Updated for Comments

Just switching your events to mouseleave instead of mouseout and mousenter instead of hover will fix the issue for your markup, like this:

$(function() {
  $('#sn-not-logged-in').mouseenter(function() {
    $('#sn-not-logged-in-hover').fadeIn('medium');
  });
  $('#sn-not-logged-in-hover').mouseleave(function() {
    $('#sn-not-logged-in-hover').fadeOut('medium');
  });
});

---

Previous Answer

Change your .hover() up a bit, like this:

$(function() {
  $('#sn-not-logged-in').hover(function() {
    $('#sn-not-logged-in-hover').fadeIn('medium');
  }, function() {
     $('#sn-not-logged-in-hover').fadeOut('medium');
  });
});

.hover() executes on mouseenter and mouseleave (the first and second function you provide, respectively), so it's calling the fadeIn() already overlapping a bit already.

The mouseout however, fires even when entering a child, mouseenter which .hover() uses won't. So what's currently actually causing your current issue...moving the mouse onto the <img> tag inside, won't be a problem :)