2016-05-10 118 views
3

我有一个工具提示,由于父div上的overflow: auto而隐藏。CSS overflow:自动隐藏工具提示

<div id="content"> 
    <div id="wrapper"> 
     <div class="item"><span class="tooltip">Tooltip text</span></div> 
     <div class="item"><span class="tooltip">Tooltip text</span></div> 
     <div class="item"><span class="tooltip">Tooltip text</span></div> 
    </div> 
</div> 

#wrapper { 
    width: 400px; 
    height: 100px; 
    border: 1px solid #ccc; 
    border-radius: 10px; 
    overflow: auto; 
    padding: 10px; 
} 
.item { 
    width: 50px; 
    height: 50px; 
    border: 1px solid #ccc; 
    border-radius: 10px; 
    margin-top: 10px; 
    position: relative; 
} 
.item:hover .tooltip { 
    visibility: visible; 
} 
.item .tooltip { 
    visibility: hidden; 
    background-color: black; 
    color: #fff; 
    padding: 5px 0; 
    border-radius: 6px; 
    overflow: auto; 
    z-index: 1; 
    width: 100px; 
    position: absolute; 
} 

JSfiddle link

回答

6

设置在position: absolute;position: fixed;tooltip