Подсказка с чистым css - Проблемы с переполнением

Question

Как правильно отображать эти всплывающие подсказки? С видимым переполнением проблема решена, но я не могу ее использовать, иначе другие элементы выходят из div. Как решить? 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 
} 

http://jsfiddle.net/6JeRU/1

Answer 1

Есть ли у вас иметь height для #test контейнера DIV? Если считать, что и отложите overflow:visible он отлично работает:

http://jsfiddle.net/shaunp/6JeRU/4/

#test{ 
    width: 80px; 
    /* no height */ 
    border: 1px solid black; 
    margin: 0 auto; 
    margin-top: 150px; 
    overflow: visible; 
} 

Answer 2

Вы пробовали новый ясный исправить?

http://nicolasgallagher.com/micro-clearfix-hack/