最近做公司的项目有些地方可能需要一些小提示，于是自己建立项目研究tips。在此之前看到过一些别人写的JqueryTips，于是借鉴了一些别人的经验在此基础上我做出了一些改进。

有的同学可能使用过其他一些JqueryTIps的工具，但是我看了那些有些不适合我来使用，所以自己做吧，用的也Happy。

因为有些数据可能过长，会导致设计好的表格样式变形，所以在绑定数据的时候大多数都会设置过长数据省略号显示，但是这就会导致我们查看数据的时候不太方便，html自带的title技能可能已经足够我们使用，但是我觉得样式可能不好看，而且反应有些迟钝。于是做了这个小工具。代码不多。

因为是测试用的，所以我直接在页面上写了这些数据，这些内容大家将就的看一下吧。不要计较这些啊。

以下是测试数据的代码，包括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; /* 内容超出宽度时隐藏超出部分的内容 */17             text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与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                         学历 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                         [email protected] 49                     </td> 50                     <td class="tips"> 51                         深圳市南山区白石洲上白石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                         深圳市南山区白石洲上白石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                         深圳市南山区白石洲上白石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                         深圳市南山区白石洲上白石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                     &