What is the best way to effectively showcase these tooltips? When using overflow visible, the issue is resolved, but it causes other elements to spill out of the div. How can this be addressed? HTML:
<div id="test">
<a title='Sample tooltip' class='tooltip'>Test</a>
<br/>
<a title='Sample tooltip' class='tooltip'>Test</a>
<br/>
<a title='Sample tooltip' class='tooltip'>Test</a>
</div>
CSS:
#test{
width: 80px;
height: 50px;
border: 1px solid black;
margin: 0 auto;
margin-top: 150px;
overflow: auto;
}
.tooltip{display:inline;position:relative}
.tooltip:hover{text-decoration:none}
.tooltip:hover:after{
background:#111;
background:rgba(0,0,0,.8);
border-radius:5px;
bottom:18px;
color:#fff;
content:attr(title);
display:block;
left:50%;
padding:5px 15px;
position:absolute;
white-space:nowrap;
z-index:98
}
.tooltip:hover:before{
border:solid;
border-color:#111 transparent;
border-width:6px 6px 0 6px;
bottom:12px;
content:"";
display:block;
left:75%;
position:absolute;
z-index:99
}