z-index tooltip inside div hover effect

Question

On a div item I have a expanding hover effect so it gets higher, wider and a shadow give it a z-index of 1 so it appears over other div items.

In that div I am using a tool tip ( tipso ). This only is visible when I give it a z-index of 2 (or greater) but when I (accidentally) hover over the tool tip bubble the expanding hover effect from the div disappears.

Very logical of course because the tool tip bubble has a higher z-index.

I tried to give the tool tip a z-index of 1 but then it is not showing at all.

Any thoughts?

Answer 1

I don't know exactly how you're doing it - js or css. But to achieve that behaviour probably you're gonna have to use javascript.

If the tooltip is located inside the div mouseenter and mouseleave events may be your best solution.