工具提示显示不正确

Question

我想在我的网站上添加一个工具提示，但它不起作用，我认为这是因为我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>

Answer 1

我已将顶部和左值添加到您的代码段中的 .tooltip：hover span 。 您已经正确地将它定位为绝对，但它没有设置任何值。

你可以通过添加右边和底部0来完全填充td，但我想这取决于你想要如何定位工具提示。

希望这有帮助！

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;