There’s a way to display an element in these conditions, by having it absolutely positioned (as a simple wrapper) and containing a relatively positioned tooltip.
So you need to add an element.
One important condition: the parent with overflow: hidden must not be positioned itself or the tooltip won’t pop out/displayed above this parent.
- Codepen (I renamed your
.tooltipsclass as.has-tooltipand added 2 anothers) - My previous answer with a similar trick
.container {
overflow: hidden;
/*position: relative;*/
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
height: 70px;
background: lightblue;
text-align: center;
}
.has-tooltip {
/*position: relative;*/
display: inline;
}
.tooltip-wrapper {
position: absolute;
visibility: hidden;
}
.has-tooltip:hover .tooltip-wrapper {
visibility: visible;
opacity: 0.7;
/*top: 30px;*/
/*left: 50%;*/
/*margin-left: -76px;*/
/* z-index: 999; defined above with value of 5 */
}
.tooltip {
display: block;
position: relative;
top: 2em;
right: 100%;
width: 140px;
height: 96px;
/*margin-left: -76px;*/
color: #FFFFFF;
background: #000000;
line-height: 96px;
text-align: center;
border-radius: 8px;
box-shadow: 4px 3px 10px #800000;
}
.tooltip: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;
}<div class="container">
<a class="has-tooltip" href="#">Hover me for Tooltip
<span class="tooltip-wrapper"><span class="tooltip">Tooltip</span></span></a>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor elit neque, in condimentum ante pulvinar et. Donec et erat nulla. Vestibulum quis porta tellus. Curabitur non blandit metus. Vestibulum nec nisi quis urna tempor pharetra. Phasellus volutpat, arcu ac malesuada porttitor, erat diam facilisis ligula, eget aliquet nibh augue.
</div>
<div>