實現當鼠標移到表格上時顯示這一格的全部內容

想實現這樣一個功能，就是在一個表格中，由於很多字過多，所以用文字溢出的方法處理了，但是這樣就無法看到表格中具體的內容呢。想實現當鼠標移上去的時候可以顯示這一行被隱藏的內容。當然這個網上有很多插件，但是我沒有用，還是自己寫了一個。

css部分

 <style>
        #showbox {
            width: 150px;
            min-height: 50px;
            font: 100 14px/1 "微軟雅黑";
            border: 1px solid #3c8dbc;
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #fff;
            padding: 5px;
        }
    </style>

html部分

<table id="example1" role="grid">
    <thead style="background-color: #E4E9F0;">
    <tr role="row">
        <th rowspan="2" style="text-align: center; width: 6%;" class="sorting_disabled " colspan="1"><font style="font-weight:bold;">序號</font></th>
        <th rowspan="2" style="text-align: center; width: 10%;" class="sorting_disabled " colspan="1"><font style="font-weight:bold;">名稱</font></th>
        <th rowspan="2" style="text-align: center; width: 10%;" class="sorting_disabled " colspan="1"><font style="font-weight:bold;">類別</font></th>
        <th rowspan="2" style="text-align: center; width: 8%;" class="sorting_disabled" colspan="1"><font style="font-weight:bold;">單位</font></th>
        <th rowspan="2" style="text-align: center; width: 26%;" class="sorting_disabled " colspan="1"><font style="font-weight:bold;">成果要求</font></th>
        <th colspan="2" style="text-align: center; " rowspan="1"><font style="font-weight:bold;">進展</font></th></tr>
    <tr role="row">
        <th style="text-align: center; width: 30%;" class="sorting_disabled" rowspan="1" colspan="1"><font style="font-weight:bold;">最新進展</font></th>
        <th style="text-align: center; width: 10%;" class="sorting_disabled " rowspan="1" colspan="1"><font style="font-weight:bold;">更新時間</font></th></tr>
    </thead>
    <tbody>
    <tr role="row">
        <td>1</td>
        <td>阿拉蕾</td>
        <td>阿拉蕾</td>
        <td>阿拉蕾</td>
        <td>阿拉蕾</td>
        <td>阿拉蕾</td>
        <td></td>
    </tr>
    <tr role="row">
        <td>2</td>
        <td>阿拉蕾</td>
        <td>阿拉蕾</td>
        <td>阿拉蕾</td>
        <td>阿拉蕾</td>
        <td>阿拉蕾</td>
        <td></td>
    </tr>
    <tr role="row" class="odd">
        <td>3</td>
        <td>阿拉蕾</td>
        <td>阿拉蕾</td>
        <td>阿拉蕾,</td>
        <td>阿拉蕾</td>
        <td></td>
    </tr>
    </tbody>
</table>
<div id="showbox"></div>

 

js部分

$(function() {
        function showBox(obj,box){
            var timer = null;
            $(obj).on("mouseover", function (e) {
                clearTimeout(timer);
                var clientX = e.clientX;
                var clientY = e.clientY;
                var txt = $(this).text();
                timer = setTimeout(function () {
                    console.log(clientX, clientY);
                    $(box).css("left", clientX).css("top", clientY);
                    if (txt == "") {
                        $(box).hide();
                    } else {
                        $(box).show();
                        $(box).html(txt);
                    }
                }, 1000);
            });
            $(obj).on("mouseout",function(){
                clearTimeout(timer);
                $(box).hide();
            });
        }
        showBox("#example1 > tbody td","#showbox");
    });

最后，其實bootstrap里面有個組建可以顯示里面的內容，只是顯示的是title，一開始不會改沒用那個，后經人點醒，可以直接給title賦值，就是給title賦值為表格里面的text就好。