工具提示没有显示正确
问题描述:
我想在我的网站上放一个工具提示,但它并没有工作,我认为这是因为我有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>
答
我添加顶部和离开值至.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>
这是为什么即使表进行了么?看起来不像你在这里代表实际表格数据... – CBroe
因为我做了类似日历的事情。所以我用桌子做了。 – HanaKuk