2016-05-10 12 views
3

Ich habe eine QuickInfo, die wegen overflow: auto auf der Eltern-Div versteckt wird.CSS-Überlauf: Tooltip zum automatischen Ausblenden

<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

Antwort

6

Stellen Sie den position: absolute;-position: fixed; in tooltip Klasse

Verwandte Themen