工具提示沒有顯示正確

我想在我的網站上放一個工具提示，但它並沒有工作，我認爲這是因爲我有overflow在td。工具提示應位於文本之上，但在另一個td的開頭處結束。謝謝你的幫助。工具提示沒有顯示正確

.akce { 
 
    height: 120px; 
 
} 
 

 
.akce td:hover { 
 
    background-color: rgba(0, 0, 0, .3); 
 
} 
 

 
.akce td { 
 
    font-size: 13px; 
 
    text-overflow: ellipsis; 
 
    width: 50px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    vertical-align: top; 
 
} 
 

 
.akce a { 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 

 
.tooltip { 
 
    position: relative; 
 
    z-index: 20; 
 
} 
 

 
.tooltip span { 
 
    display: none; 
 
} 
 

 
.tooltip:hover { 
 
    z-index: 21 
 
} 
 

 
.tooltip:hover span { 
 
    display: block; 
 
    position: absolute; 
 
    width: 200px; 
 
    background: black; 
 
    color: white; 
 
    overflow: none; 
 
}

<tr class="akce"> 
 
    <td></td> 
 
    <td><a href="https://www.facebook.com/events/1958747484336759/" class="tooltip">Ukázková lekce Čchi-kung - 8 kusů brokátu<span>Ukázková lekce Čchi-kung - 8 kusů brokátu</span></a></td> 
 
    <td><a href="https://www.facebook.com/events/119239315466281/">Ukázková lekce Čchi-kung - 8 kusů brokátu</a><br> 
 
    <a href="https://www.facebook.com/events/1763815880581348/">Ukázková lekce Tai Chi Čchi-kung - Žena na své cestě života</a></td> 
 
</tr>

來源

2017-09-13 HanaKuk

這是爲什麼即使表進行了麼？看起來不像你在這裏代表實際表格數據... – CBroe

因爲我做了類似日曆的事情。所以我用桌子做了。 – HanaKuk

我添加頂部和離開值至.tooltip：懸停跨度在您的代碼段。您已經正確定位它絕對，但它沒有設置任何值。

你也可以通過右邊和底部加上0來完全填充td，但是我想這取決於你想如何定位工具提示。

希望這會有所幫助！

.akce { 
 
    height: 120px; 
 
} 
 

 
.akce td:hover { 
 
    background-color: rgba(0, 0, 0, .3); 
 
} 
 

 
.akce td { 
 
    font-size: 13px; 
 
    text-overflow: ellipsis; 
 
    width: 50px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    vertical-align: top; 
 
} 
 

 
.akce a { 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 

 
.tooltip { 
 
    position: relative; 
 
    z-index: 20; 
 
} 
 

 
.tooltip span { 
 
    display: none; 
 
} 
 

 
.tooltip:hover { 
 
    z-index: 21 
 
} 
 

 
.tooltip:hover span { 
 
    display: block; 
 
    position: absolute; 
 
    width: 200px; 
 
    background: black; 
 
    color: white; 
 
    overflow: none; 
 
    left:0; 
 
    top:0; 
 
}

<tr class="akce"> 
 
    <td></td> 
 
    <td><a href="https://www.facebook.com/events/1958747484336759/" class="tooltip">Ukázková lekce Čchi-kung - 8 kusů brokátu<span>Ukázková lekce Čchi-kung - 8 kusů brokátu</span></a></td> 
 
    <td><a href="https://www.facebook.com/events/119239315466281/">Ukázková lekce Čchi-kung - 8 kusů brokátu</a><br> 
 
    <a href="https://www.facebook.com/events/1763815880581348/">Ukázková lekce Tai Chi Čchi-kung - Žena na své cestě života</a></td> 
 
</tr>

來源

2017-09-13 08:43:20 jcdenooy

工具提示沒有顯示正確

回答

相關問題