最近做公司的項目有些地方可能需要一些小提示，于是自己建立項目研究tips。在此之前看到過一些別人寫的JqueryTips，于是借鑒了一些別人的經(jīng)驗在此基礎(chǔ)上我做出了一些改進(jìn)。

有的同學(xué)可能使用過其他一些JqueryTIps的工具，但是我看了那些有些不適合我來使用，所以自己做吧，用的也Happy。

因為有些數(shù)據(jù)可能過長，會導(dǎo)致設(shè)計好的表格樣式變形，所以在綁定數(shù)據(jù)的時候大多數(shù)都會設(shè)置過長數(shù)據(jù)省略號顯示，但是這就會導(dǎo)致我們查看數(shù)據(jù)的時候不太方便，html自帶的title技能可能已經(jīng)足夠我們使用，但是我覺得樣式可能不好看，而且反應(yīng)有些遲鈍。于是做了這個小工具。代碼不多。

因為是測試用的，所以我直接在頁面上寫了這些數(shù)據(jù)，這些內(nèi)容大家將就的看一下吧。不要計較這些啊。

以下是測試數(shù)據(jù)的代碼，包括CSS樣式。

 1   <style type="text/css"> 2         .tab 3         { 4             width: 1000px; 5             height: 100%; 6             border-collapse: collapse; 7             margin: 0; 8             border: 1px #c0c0c0 solid; 9             table-layout: fixed;10         }11         .tab td12         {13             height: 20px;14             border: 1px #C0C0C0 solid;15             white-space: nowrap; /* 不換行 */16             overflow: hidden; /* 內(nèi)容超出寬度時隱藏超出部分的內(nèi)容 */17             text-overflow: ellipsis; /* 當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記(...) ；需與overflow:hidden;一起使用。*/18         }19         .tab th20         {21             height: 24px;22             background: url(panel-header-bg.gif) repeat-x left top;23             line-height: 26px;24             height: 26px;25             font-weight: bold;26             border: 1px #C0C0C0 solid;27         }28     </style>

  1   <table class="tab">  2             <thead>  3                 <tr>  4                     <th style="width: 5%;">  5                         編號  6                     </th>  7                     <th style="width: 10%">  8                         姓名  9                     </th> 10                     <th style="width: 5%"> 11                         性別 12                     </th> 13                     <th style="width: 12%"> 14                         電話 15                     </th> 16                     <th style="width: 15%"> 17                         郵箱 18                     </th> 19                     <th style="width: 15%"> 20                         地址 21                     </th> 22                     <th style="width: 10%"> 23                         學(xué)歷 24                     </th> 25                     <th style="width: 8%"> 26                         婚否 27                     </th> 28                     <th style="width: 20%"> 29                         備注 30                     </th> 31                 </tr> 32             </thead> 33             <tbody> 34                 <tr> 35                     <td> 36                         1 37                     </td> 38                     <td> 39                         Mike11 40                     </td> 41                     <td> 42                         男11 43                     </td> 44                     <td> 45                         1523652256311 46                     </td> 47                     <td class="tips"> 48                         mikeLoveNike@Gmail.com11 49                     </td> 50                     <td class="tips"> 51                         深圳市南山區(qū)白石洲上白石102棟11 52                     </td> 53                     <td> 54                         本科11 55                     </td> 56                     <td> 57                         已婚11 58                     </td> 59                     <td class="tips"> 60                         時間都去哪兒了時間都去哪兒了11時間都去度假了時間都去度假了嗎 61                     </td> 62                 </tr> 63                 <tr> 64                     <td> 65                         2 66                     </td> 67                     <td> 68                         Mike22 69                     </td> 70                     <td> 71                         男22 72                     </td> 73                     <td> 74                         1523652256322 75                     </td> 76                     <td class="tips"> 77                         [email protected] 78                     </td> 79                     <td class="tips"> 80                         深圳市南山區(qū)白石洲上白石102棟22時間都去度假了時間都去度假了嗎哈哈哈哈 81                     </td> 82                     <td> 83                         本科22 84                     </td> 85                     <td> 86                         已婚22 87                     </td> 88                     <td class="tips"> 89                         時間都去哪兒了時間都去哪兒了22時間都去度假了時間都去度假了嗎哈哈哈哈 90                     </td> 91                 </tr> 92                 <tr> 93                     <td> 94                         3 95                     </td> 96                     <td> 97                         Mike33 98                     </td> 99                     <td>100                         男33101                     </td>102                     <td>103                         1523652256333104                     </td>105                     <td class="tips">106                         [email protected]                     </td>108                     <td class="tips">109                         深圳市南山區(qū)白石洲上白石102棟33時間都去度假了時間都去度假了嗎哈哈哈哈110                     </td>111                     <td>112                         本科33113                     </td>114                     <td>115                         已婚33116                     </td>117                     <td class="tips">118                         時間都去哪兒了時間都去哪兒了33時間都去度假了時間都去度假了嗎哈哈哈哈119                     </td>120                 </tr>121                 <tr>122                     <td>123                         4124                     </td>125                     <td>126                         Mike44127                     </td>128                     <td>129                         男44130                     </td>131                     <td>132                         1523652256344133                     </td>134                     <td class="tips">135                         [email protected]                     </td>137                     <td class="tips">138                         深圳市南山區(qū)白石洲上白石102棟44444時間都去度假了時間都去度假了嗎哈哈哈哈139                     </td>140                     <td>141                         本科44142                     </td>143                     <td>144                         已婚44145                     </td>146                     <td class="tips">147                         時間都去哪兒了時間都去哪兒了44時間都去度假了時間都去度假了嗎哈哈哈哈148                     </td>149                 </tr>150                 <tr>151                     <td>152                         5153                     </td>154                     <td>155                         Mike55156                     </td>157                     <td>158                         男55159                     </td>160                     <td>161                         1523652256355162                     </td>163                     &