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

Question

I have an HTML table that has some cells with very large amounts of content (eg 1KB). Most of the cells have much less than this, 15 bytes or so.

I want to hide the large content in a tooltip. What's the best way to do this? Eg show the first 15 bytes or so with a "..." then let a user hover or click to see the rest (or alternately, not even show the first 15 bytes if that's not easy)

We're using Bootstrap if that makes any difference.

Answer 1

The most simple possible implementation is ... ( 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>

Of course for cleaner code, you should consider factoring out methods (or even better, adding event handlers using jQuery )