element hover overlapping element

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?

@otakustay thanks for the suggestion, but `mousenter` will fail here as the function will then not apply to any inner element — AKG, Jul 25 '12 at 06:39

score 1 · Accepted Answer · answered Jul 25 '12 at 06:34

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.

answered Jul 25 '12 at 06:34

codef0rmer

10,284
9
53
76

thanks, your suggestion works. I tried Z-index 500 on `.description` before, but that didn't seem to work, even if I set `.product` on 100. Any idea why? – AKG Jul 25 '12 at 06:50
If I'm not wrong, browser stacks every element based on z-index and rest of them go at the end how they put in the page. So you must be having more than 400 elements floating across the page which might be causing the issue. It's always good to set the highest value to such elements. – codef0rmer Jul 25 '12 at 07:10

score 0 · Answer 2 · answered Jul 25 '12 at 06:35

0

What I'd do is unbind the mouseleave function when the mouse enters the .description, and rebind it when the mouse leaves the .description. Although it might be simpler (and less buggy) to just use a tested tooltip plugin (there are a ton).

answered Jul 25 '12 at 06:35

Inkbug

1,682
1
10
26

I was going along that road too, but I didn't manage to wrap my head around it. But adjusting the Z-Index like codef0rmer suggested seemed to work. – AKG Jul 25 '12 at 06:49

score 0 · Answer 3 · answered Jul 25 '12 at 06:38

0

Try to set position:relative on dd.productWrap

Your <dl> has display: table-call. This prevents position:relative from applying too it

answered Jul 25 '12 at 06:38

d.k

4,234
2
26
38

`position:relative` is used on `.product` here with the intent to keep `.description` `position: absolute` in reference to `.product`. If I didn't specify that, the tooltips would show up at the top of the page, so it's working fine :) – AKG Jul 25 '12 at 06:45
So what's the problem? You JS works fine, but tooltips are shown at the top of the page. I thought that was the problem, isn't it? – d.k Jul 25 '12 at 06:47
it's not displaying properly? the tooltip should be **under** `.product`, not at the top of the page. Works fine here? @caligula – AKG Jul 25 '12 at 06:52
in FF 14.0.1 when I hover on product (e.g. in 8-th row) a tooltip is shown at the top of the page – d.k Jul 25 '12 at 06:54
thanks for letting me know. I'm gonna take a look at it in a minute – AKG Jul 25 '12 at 06:57

element hover overlapping element

3 Answers3