html - 工具提示未正确显示

Question

我想在我的网站上放一个工具提示，但它不起作用，我认为这是因为我在 td 上有 overflow。工具提示应该在文本之上，但它在另一个 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

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

您还可以通过在 right 和 bottom 中添加 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>