在工具提示中隐藏长表格单元格内容

时间:2013-06-24 23:50:41

标签: javascript html twitter-bootstrap tooltip

我有一个HTML表格,其中包含一些内容非常多的单元格(例如1KB)。大多数细胞比这少得多,大约15个字节左右。

我想在工具提示中隐藏大量内容。最好的方法是什么?例如。用“......”显示前15个字节左右,然后让用户悬停或点击查看其余部分(或者,如果这不容易,甚至不显示前15个字节)

如果这有任何不同,我们正在使用Bootstrap。

1 个答案:

答案 0 :(得分:1)

最简单的可能实现是......(Working example here

<div
    onmouseover="document.getElementById('Overflow1').style.display='inline'"
    onmouseout="document.getElementById('Overflow1').style.display='none'">

    Lorem ipsum dolor sit amet,     
    <span id="Overflow1" style="display: none">
        consectetur adipiscing elit. Fusce a erat non nunc facilisis pulvinar. Ut dignissim ut nisi eu porttitor. Nulla cursus, dolor fringilla ullamcorper dictum, arcu orci faucibus sem, ullamcorper mattis odio sapien quis tortor. Proin dictum vel neque non malesuada. Pellentesque at consectetur augue. Curabitur ipsum est, posuere commodo feugiat quis, suscipit at neque.
    </span>
</div>

当然,对于更干净的代码,您应该考虑分解方法(甚至更好,添加event handlers using jQuery