最近做公司的项目有些地方可能需要一些小提示，于是自己建立项目研究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 td 12 { 13 height: 20px; 14 border: 1px #C0C0C0 solid; 15 white-space: nowrap; /* 不换行 */ 16 overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */ 17 text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/ 18 } 19 .tab th 20 { 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 mikeLoveNike@gmail.com11 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 mikeLoveNike@gmail.com22 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 男33 101 </td> 102 <td> 103 1523652256333 104 </td> 105 <td class="tips"> 106 mikeLoveNike@gmail.com33 107 </td> 108 <td class="tips"> 109 深圳市南山区白石洲上白石102栋33时间都去度假了时间都去度假了吗哈哈哈哈 110 </td> 111 <td> 112 本科33 113 </td> 114 <td> 115 已婚33 116 </td> 117 <td class="tips"> 118 时间都去哪儿了时间都去哪儿了33时间都去度假了时间都去度假了吗哈哈哈哈 119 </td> 120 </tr> 121 <tr> 122 <td> 123 4 124 </td> 125 <td> 126 Mike44 127 </td> 128 <td> 129 男44 130 </td> 131 <td> 132 1523652256344 133 </td> 134 <td class="tips"> 135 mikeLoveNike@gmail.com44 136 </td> 137 <td class="tips"> 138 深圳市南山区白石洲上白石102栋44444时间都去度假了时间都去度假了吗哈哈哈哈 139 </td> 140 <td> 141 本科44 142 </td> 143 <td> 144 已婚44 145 </td> 146 <td class="tips"> 147 时间都去哪儿了时间都去哪儿了44时间都去度假了时间都去度假了吗哈哈哈哈 148 </td> 149 </tr> 150 <tr> 151 <td> 152 5 153 </td> 154 <td> 155 Mike55 156 </td> 157 <td> 158 男55 159 </td> 160 <td> 161 1523652256355 162 </td> 163 <td class="tips"> 164 mikeLoveNike@gmail.com55 165 </td> 166 <td class="tips"> 167 深圳市南山区白石洲上白石102栋55 168 </td> 169 <td> 170 本科11 171 </td> 172 <td> 173 已婚11 174 </td> 175 <td class="tips"> 176 时间都去哪儿了时间都去哪儿了55时间都去度假了时间都去度假了吗 177 </td> 178 </tr> 179 <tr> 180 <td> 181 6 182 </td> 183 <td> 184 Mike66 185 </td> 186 <td> 187 男66 188 </td> 189 <td> 190 1523652256366 191 </td> 192 <td class="tips"> 193 mikeLoveNike@gmail.com77 194 </td> 195 <td class="tips"> 196 深圳市南山区白石洲上白石102栋77时间都去度假了时间都去度假了吗哈哈哈哈 197 </td> 198 <td> 199 本科77 200 </td> 201 <td> 202 已婚77 203 </td> 204 <td class="tips"> 205 时间都去哪儿了时间都去哪儿了77时间都去度假了时间都去度假了吗哈哈哈哈 206 </td> 207 </tr> 208 <tr> 209 <td> 210 8 211 </td> 212 <td> 213 Mike88 214 </td> 215 <td> 216 男88 217 </td> 218 <td> 219 1523652256388 220 </td> 221 <td class="tips"> 222 mikeLoveNike@gmail.com88 223 </td> 224 <td class="tips"> 225 深圳市南山区白石洲上白石102栋88时间都去度假了时间都去度假了吗哈哈哈哈 226 </td> 227 <td> 228 本科88 229 </td> 230 <td> 231 已婚88 232 </td> 233 <td class="tips"> 234 时间都去哪儿了时间都去哪儿了88时间都去度假了时间都去度假了吗哈哈哈哈 235 </td> 236 </tr> 237 <tr> 238 <td> 239 9 240 </td> 241 <td> 242 Mike99 243 </td> 244 <td> 245 男99 246 </td> 247 <td> 248 1523652256399 249 </td> 250 <td class="tips"> 251 mikeLoveNike@gmail.com99 252 </td> 253 <td class="tips"> 254 深圳市南山区白石洲上白石102栋999999时间都去度假了时间都去度假了吗哈哈哈哈 255 </td> 256 <td> 257 本科99 258 </td> 259 <td> 260 已婚99 261 </td> 262 <td class="tips"> 263 时间都去哪儿了时间都去哪儿了99时间都去度假了时间都去度假了吗哈哈哈哈 264 </td> 265 </tr> 266 <tr> 267 <td> 268 10 269 </td> 270 <td> 271 Mike1010 272 </td> 273 <td class="tips"> 274 男1010 275 </td> 276 <td class="tips"> 277 152365225631010 278 </td> 279 <td class="tips"> 280 mikeLoveNike@gmail.com1010 281 </td> 282 <td class="tips"> 283 深圳市南山区白石洲上白石102栋1010 284 </td> 285 <td> 286 本科1010 287 </td> 288 <td> 289 已婚1010 290 </td> 291 <td class="tips"> 292 时间都去哪儿了时间都去哪儿了1010时间都去度假了时间都去度假了吗 293 </td> 294 </tr> 295 <tr> 296 <td> 297 11 298 </td> 299 <td> 300 Mike1111 301 </td> 302 <td class="tips"> 303 男1111 304 </td> 305 <td class="tips"> 306 152365225631111 307 </td> 308 <td class="tips"> 309 mikeLoveNike@gmail.com1111 310 </td> 311 <td class="tips"> 312 深圳市南山区白石洲上白石102栋1111时间都去度假了时间都去度假了吗哈哈哈哈 313 </td> 314 <td> 315 本科1111 316 </td> 317 <td> 318 已婚1111 319 </td> 320 <td class="tips"> 321 时间都去哪儿了时间都去哪儿了1111时间都去度假了时间都去度假了吗哈哈哈哈 322 </td> 323 </tr> 324 <tr> 325 <td> 326 12 327 </td> 328 <td> 329 Mike1212 330 </td> 331 <td class="tips"> 332 男1212 333 </td> 334 <td class="tips"> 335 152365225631212 336 </td> 337 <td class="tips"> 338 mikeLoveNike@gmail.com1212 339 </td> 340 <td class="tips"> 341 深圳市南山区白石洲上白石102栋1212时间都去度假了时间都去度假了吗哈哈哈哈 342 </td> 343 <td> 344 本科1212 345 </td> 346 <td> 347 已婚1212 348 </td> 349 <td class="tips"> 350 时间都去哪儿了时间都去哪儿了1212时间都去度假了时间都去度假了吗哈哈哈哈 351 </td> 352 </tr> 353 <tr> 354 <td> 355 13 356 </td> 357 <td> 358 Mike1313 359 </td> 360 <td class="tips"> 361 男1313 362 </td> 363 <td class="tips"> 364 152365225631313 365 </td> 366 <td class="tips"> 367 mikeLoveNike@gmail.com1313 368 </td> 369 <td class="tips"> 370 深圳市南山区白石洲上白石102栋131313131313时间都去度假了时间都去度假了吗哈哈哈哈 371 </td> 372 <td> 373 本科1313 374 </td> 375 <td> 376 已婚1313 377 </td> 378 <td class="tips"> 379 时间都去哪儿了时间都去哪儿了1313时间都去度假了时间都去度假了吗哈哈哈哈 380 </td> 381 </tr> 382 </tbody> 383 </table>
以上是要准备的，除此之外还需要准备一个Jquery库。这个很好找吧。
刚刚开始做的时候，遇到一个很棘手的问题，就是tip显示的时候遇到浏览器边框就会伸出去，然后你鼠标移动之后又根本看不着，好吧，这跟我们的需求很不符合了。于是我在判断tip的位置的时候做一个判断，这个判断是根据你页面宽度和tip的宽度来觉得的。看以下代码：
1 var windowWidth = $(window).width();//浏览器宽度 2 var tooltipWidth = $("#tooltip").width();//tipdiv宽度 3 if (windowWidth - e.clientX - 5 < tooltipWidth) {//判断提示是否会被隐藏
使用浏览器的当前宽度，减去鼠标当前位置，可以得到鼠标当前距离浏览器的宽度。再与tipdiv的宽度对比。
这样在我鼠标移动的时候可以知道tip显示的地方是否会在浏览器的边缘了。然后根据这样的判断，可以讲tip的右边距设置成固定值，这样你移动鼠标都不会对tip产生影响了，但是当你鼠标移动到其他地方的时候又将重新计算。
然后看一下给tip定位的代码：
if (windowWidth - e.clientX - 5 < tooltipWidth) {//判断提示是否会被隐藏 $("#tooltip").css({ "top": (e.clientY + 5) + "px", "right": "5px" }) } else { $("#tooltip").css({ "top": (e.clientY + 5) + "px", "left": (e.clientX + 5) + "px" }) } }).mousemove(function (e) { var windowWidth = $(window).width(); var tooltipWidth = $("#tooltip").width(); if (windowWidth - e.clientX - 5 < tooltipWidth) {//判断提示是否会被隐藏 $("#tooltip").css({ "top": (e.clientY + 5) + "px", "right": "5px" }) } else { $("#tooltip").css({ "top": (e.clientY + 5) + "px", "left": (e.clientX + 5) + "px" }) }
这里之前我一直都很迷糊，因为有两个属性在Jquery里面。pageX，Y和clientX，Y。做了许久都有一个问题困扰。就是当浏览器中数据太多了，出现了滚动条之后，pageX，Y已经不能准确定位了。于是另辟一条路。
我Google了一下css定位相关的内容。开始我一直使用的absolute，绝对定位，相对page的。后来我使用的是fixed，相对于浏览器的可见页面。这样就好办了。继续看看代码：
1 var toolTip = "<div id=‘tooltip‘>" + $(this).text() + "</div>"; 2 $("body").append(toolTip); 3 $("#tooltip").css({ 4 "position": "fixed",//这里使用fixed相对于浏览器可见页面定位 5 "padding": "5px", 6 "background": "#F0F0E8", 7 "white-space": "nowrap",//让div内的文字内容部换行 8 "border": "1px gray solid" 9 }).show(200);
好了代码很简单，接下来看看效果如何吧。
经本人测试，Google和IE都可以使用。
有个bug我一直想不明白，就是当我的tip显示之后，我在移动鼠标，有时候会出现tipdiv被拉长了。求大神解释，看下效果：
下面是html代码的附件，有兴趣的同学可以直接下载，用浏览器打开即可：JqueryTips.zip
以上是小弟个人理解，如果有更好的想法，欢迎拍砖，来辩。