z-index does not work on my tooltip with carousel

Question

On the carousel at the top of my site , I am using two sorts of tooltip. The first is the one implemented with the carousel which uses this style:

  #carousel div:hover span,
        #carousel div.hover span {
            background-color: #333;
            color: #fff;
            display: inline-block;
            width: 500px;
            padding: 2px 0;
            margin: 0 0 0 -500px;
            position: absolute;
            bottom: 0;
            left: 50%;
            border-radius: 3px;
            z-index: 600 !important;
        }

This the grey box, as you can see with the first image, if it goes over the wrapper div, it will cut it. Even though I am using z-index.

The second is the one which use the class "tooltip4" :

.tooltip4:hover em {
z-index: 600;
text-align: center;
font-style: normal;
display: block;
position: absolute;
top: 50px;
left: 50px;
padding: 5px;
color: #fff;
/*border: 1px solid #bbb;*/
background-color:rgba(16,110,99,0.9);
box-shadow: 0 0 7px 2px #1B8478;
width:400px;    
}

This one is used on the second image, and you can't even see it, it should have an effect similar to the carousel in the left.

Is there a solution to these problems please?

Answer 1

#carousel div:hover span,#carousel div.hover span {margin: 0 0 0 -90px;}

remove z-index from this class #carousel div

and edit this class

.tooltip4:hover em {top: -243px;left: -197px;}

Answer 2

I think the problem is actually that you've placed your span within div.caroufredsel_wrapper which has specific width and height so it is getting cut off outside of that div . If you place the span at a higher level (like under body or maybe header or div#wrapper ), it should work.