表中的工具提示隐藏了溢出

Question

我有一个简单的表格，其中包含td overflow: hidden和text-overflow: ellipsis 我想制作一个工具提示，它将“坚持”编辑：文本（不在td框之外），但我无法用overflow: hidden执行此操作。工具提示被切断或甚至不可见。

我试图为我的问题找到一个解决方案，但遗憾的是找不到好的解决方案。

这是我的代码： https://jsfiddle.net/480cgv0j/1/

也许有些JS会在这里提供帮助？但我不知道该怎么做。

Answer 1

无需将工具提示系统更改为附加工具提示的javascript主体，最佳方法是：

https://jsfiddle.net/480cgv0j/6/

变化是：

 .tooltip:hover { overflow: visible; }

将类别tooltip从<a>元素更改为<td>元素：

<强>之前：

 <td><a href="#" class="tooltip">xxxxxxxxxxxxxxxxxxxxxx<span class="tooltiptext">you won't see me</span></a></td>

立即

 <td class="tooltip"><a href="#">xxxxxxxxxxxxxxxxxxxxxx<span class="tooltiptext">you won't see me</span></a></td>