Is there a way, preferably without js, to position and display a tooltip above a container, when the container must have overflow:hidden
, without the tooltip be
now i used position absolute to fixed for the tooltip, check it now
.container {
position: relative;
overflow:hidden;
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
height: 70px;
background: lightblue;
text-align: center;
z-index:9;
}
a.tooltips {
position: relative;
display: block;
}
a.tooltips span {
position: fixed;
width: 140px;
color: #FFFFFF;
background: #000000;
height: 96px;
line-height: 96px;
text-align: center;
visibility: hidden;
border-radius: 8px;
z-index:9999;
top:15px;
box-shadow: 4px 3px 10px #800000;
}
a.tooltips span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.7;
top: 40px;
left: 50%;
margin-left: -76px;
z-index: 999;
}