我在将工具提示定位在表内的数据列上时遇到一些问题,该表本身位于垂直滚动 div 内。为您提供一点背景...
由于我无法控制的遗留问题,我正在开发的页面必须通过固定宽度和高度的 iframe 来显示。我需要显示的数据大约有12列,需要全部显示。一列将包含序列号,有时最终会溢出单元格的边界。我已设置此列的溢出以显示省略号,并添加了工具提示,如已接受的答案中所述this https://stackoverflow.com/questions/2736021问题。
添加工具提示后,它似乎会获取从表格顶部到悬停单元格的距离,并绘制距父 div 顶部距离的工具提示。这意味着,当您向下滚动 div 时,工具提示最终会绘制在 div 底部下方。
我创建了一个 jsFiddle 来演示这一点:http://jsfiddle.net/kuzxLwxe/4/ http://jsfiddle.net/kuzxLwxe/4/
这是我的CSS:
.ResultsWrapper { width:150px; height:314px; text-align:center; overflow-x:hidden; overflow-y:scroll; border:1px solid black; } .ResultsTable { width:86px; border-collapse:collapse; table-layout:fixed; } .ResultsTable th, .ResultsTable td { border:1px solid black; overflow:hidden; text-overflow:ellipsis; } .ColumnSerialNo { width:81px; } .hasTooltip span { display: none; color: #000; text-decoration: none; padding: 3px; } .hasTooltip:hover span { display: block; position: absolute; background-color: #FFF; border: 1px solid #CCC; margin: 2px 10px; }
还有我的html:
<div class="ResultsWrapper"> <table class="ResultsTable"> <thead> <tr> <th class="ColumnSerialNo">Serial Number</th> </tr> </thead> <tbody> <tr> <td class="hasTooltip">3119985815206<span>3119985815206</span></td> </tr> <tr> <td class="hasTooltip">5665811486586<span>5665811486586</span></td> </tr> ... </tbody> </table> </div>
我在同一页面中使用 jQuery 来处理其他事情,但到目前为止还无法找到解决方案。如果您认为解决此问题的最佳方法是使用 JS 或 jQuery,我很乐意看到结果!
提前致谢
更改您的 HTML 标记以更好地控制overflow:
overflow
<tr> <td class="hasTooltip"> <div class="SerialNumberContainer"> <div class="SerialNumber">3119985815206</div> <div class="SerialNumberTooltip">3119985815206</div> </div> </td> </tr>
在你的 CSS 中,删除overflow from td:
td
.ResultsTable th, .ResultsTable td { border:1px solid black; /* overflow: hidden; this line should delete */ text-overflow:ellipsis; }
和新的 CSS:
.SerialNumberContainer { position: relative; z-index: 10; } .SerialNumber { width: 80px; overflow: hidden; } .SerialNumberTooltip { position: absolute; top: 10px; left: 2px; background-color: #FFF; border: 1px solid #CCC; display: none; } .SerialNumberContainer:hover { z-index: 20; } .SerialNumberContainer:hover .SerialNumberTooltip { display: block; }
JSFiddle 演示 http://jsfiddle.net/kuzxLwxe/5/.