Question

I’m trying to get a tooltip effect with jQuery and it isn’t working exactly the way I want it to.

$(".product").mouseover(function() {
    $(this).find(".description").fadeIn(300);
}).mouseleave(function() {
    $(this).find(".description").stop().fadeOut(300);
});

.product is the parent element, .description is the child element.

This is the page I’m working on. I need the tooltip (.description) to remain visible if I hover it. I’ve been successful in getting that to work, however if the tooltip overlaps the coordinates of another parent element (.product triggers the function after all), it disappears.

Can anybody nudge me into the right direction? I’ve read up a lot here on stackoverflow but although there are many similar questions, those suggested solutions don’t seem to work for me. Can any kind soul help a JavaScript idiot here?

Answer 1

Try to set the z-index to your tooltip to something 999999:

<dd class="description" style="opacity: 1; display: block; z-index: 999999; ">
    Avocado op een bootje van rijst en zeewier
    <span class="social">FB | Twitter</span>
</dd>

Make sure to have the z-index for dd.description higher than those images.