工具提示没有显示正确

我想在我的网站上放一个工具提示，但它并没有工作，我认为这是因为我有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

工具提示没有显示正确

回答

相关问题