在我们的网站上，我们目前通过从云提供商获取数据并将其显示在表格中来显示描述文本。但是，有时我们希望描述更长，但它超出了可用区域并且我们的 CSS 将溢出定义为省略号。我正在寻找添加 jQuery 代码来扩展悬停时的隐藏文本，但不会弄乱表格的行高或宽度。如果不增加行的高度，我尝试在悬停时编辑高度的 CSS 解决方案将无法工作。
如果隐藏文本可以通过停留在所有其他元素之上来弹出现有文本，那就太好了。弹出框还应在一定宽度后自动转到新行，因此弹出框甚至可能必须停留在下方行的顶部。弹出框周围的边框或阴影会很好。
一般来说，我是 Javascript、jQuery 和 Web 编码的新手，但我可以处理这些东西。我已经尝试了几个来自网络的悬停示例，但无法让它们为我工作。
这是它当前使用随机填充数据时的样子：
【问题讨论】：
标签： php jquery text hover css-tables
使用 jquery 工具提示插件。也可以通过将title属性设置为标题的全部内容来达到类似的效果 试试 jquery ui 工具提示http://jqueryui.com/tooltip/
只为工具提示使用 jquery UI 有点过头了。所以你可以在谷歌上搜索其他人
【讨论】：
<td title="Something">Data</td>
您可以使用这种机制：
<a class="zoom" href='#' style='font-size:12px;top:50px;left:50px'>Hover me!</a>
主要
.zoom {
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.zoom:hover {
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
那么对于省略号，您可以使用小示例代码：
<ul>
<li><span class="icon"></span>Long Text with text-overflow:ellipsis</li>
<li><span class="icon"></span>Short text</li>
<li><span class="icon"></span>Long Text with text-overflow:ellipsis</li>
</ul>
和css
.icon {
height:18px;
width:18px;
background:url(http://www.darkroomart.com/dewolfe/css/images/dw-icons.png);
float:right;
cursor:pointer;
background-position:-72px -72px;
display: block;
}
.icon:hover {
background-position:-90px -72px;
}
li {
text-overflow:ellipsis;
height:20px;
overflow:hidden;
white-space:nowrap;
list-style-type:none;
width:150px;
}
【讨论】：