CODEWITHSUNDEEP
javascriptcss
William J Bryan
William J Bryan

Reputation: 1

javascript tooltip showing behind css image

I'm pulling an event list calendar in to my site from a third party provider. It's pulled in using a simple javascript call, and has been placed inside a div on my site. When hovering over an event, you get a tooltip popup that shows more information about it (all driven by javascript). I'm using CSS to put an image as the background for the div, but the tooltip popups are appearing behind the CSS sourced image. I've attempted to set a z-index of 0 for the main div that pulls the background image, and then nest a second div for my javascript with a z-index of 1, but it's not doing anything.

I don't have access to edit any of the javascript for the third party calendar system, so the fix has to be accomplished with whatever I can do on my own site. Unfortunately I wouldn't consider myself a pro at web development, so there may well be a very simply answer I'm not finding, but right now I'm stumped.

Any suggestions? Thanks!

Upvotes: 0

Views: 790

Answers (2)

LouD
LouD

Reputation: 11

It would be really helpful if you could show us some code.

The main reason why z-index doesn't work could be that you forgot to set position. Z-index only works on positioned elements (position: absolute, position: relative or position: fixed).

The second reason could be the one that @kremalicious mentioned. Setting higher z-index to the child element.

Upvotes: 1

kremalicious
kremalicious

Reputation: 1371

It looks like you're trying to set a z-index for an element whose parent element already has z-index. That's not possible. If you want to set a different z-index on the tooltip element it has to be outside of the first div.

Upvotes: 1

Related Questions