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?
#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;}