最近做公司的项目有些地方可能需要一些小提示，于是自己建立项目研究tips。在此之前看到过一些别人写的JqueryTips，于是借鉴了一些别人的经验在此基础上我做出了一些改进。
有的同学可能使用过其他一些JqueryTIps的工具，但是我看了那些有些不适合我来使用，所以自己做吧，用的也Happy。
因为有些数据可能过长，会导致设计好的表格样式变形，所以在绑定数据的时候大多数都会设置过长数据省略号显示，但是这就会导致我们查看数据的时候不太方便，html自带的title技能可能已经足够我们使用，但是我觉得样式可能不好看，而且反应有些迟钝。于是做了这个小工具。代码不多。
因为是测试用的，所以我直接在页面上写了这些数据，这些内容大家将就的看一下吧。不要计较这些啊。
以下是测试数据的代码，包括CSS样式。
1
1
| 5 编号 6 | 78 姓名 9 | 1011 性别 12 | 1314 电话 15 | 1617 邮箱 18 | 1920 地址 21 | 2223 学历 24 | 2526 婚否 27 | 2829 备注 30 | 31
|---|---|---|---|---|---|---|---|---|
| 36 1 37 | 3839 Mike11 40 | 4142 男11 43 | 4445 1523652256311 46 | 4748 mikeLoveNike@gmail.com11 49 | 5051 深圳市南山区白石洲上白石102栋11 52 | 5354 本科11 55 | 5657 已婚11 58 | 5960 时间都去哪儿了时间都去哪儿了11时间都去度假了时间都去度假了吗 61 | 62
| 65 2 66 | 6768 Mike22 69 | 7071 男22 72 | 7374 1523652256322 75 | 7677 mikeLoveNike@gmail.com22 78 | 7980 深圳市南山区白石洲上白石102栋22时间都去度假了时间都去度假了吗哈哈哈哈 81 | 8283 本科22 84 | 8586 已婚22 87 | 8889 时间都去哪儿了时间都去哪儿了22时间都去度假了时间都去度假了吗哈哈哈哈 90 | 91
| 94 3 95 | 9697 Mike33 98 | 99100 男33101 | 102103 1523652256333104 | 105106 mikeLoveNike@gmail.com33107 | 108109 深圳市南山区白石洲上白石102栋33时间都去度假了时间都去度假了吗哈哈哈哈110 | 111112 本科33113 | 114115 已婚33116 | 117118 时间都去哪儿了时间都去哪儿了33时间都去度假了时间都去度假了吗哈哈哈哈119 | 120
| 123 4124 | 125126 Mike44127 | 128129 男44130 | 131132 1523652256344133 | 134135 mikeLoveNike@gmail.com44136 | 137138 深圳市南山区白石洲上白石102栋44444时间都去度假了时间都去度假了吗哈哈哈哈139 | 140141 本科44142 | 143144 已婚44145 | 146147 时间都去哪儿了时间都去哪儿了44时间都去度假了时间都去度假了吗哈哈哈哈148 | 149
| 152 5153 | 154155 Mike55156 | 157158 男55159 | 160161 1523652256355162 | 163164 mikeLoveNike@gmail.com55165 | 166167 深圳市南山区白石洲上白石102栋55168 | 169170 本科11171 | 172173 已婚11174 | 175176 时间都去哪儿了时间都去哪儿了55时间都去度假了时间都去度假了吗177 | 178
| 181 6182 | 183184 Mike66185 | 186187 男66188 | 189190 1523652256366191 | 192193 mikeLoveNike@gmail.com77194 | 195196 深圳市南山区白石洲上白石102栋77时间都去度假了时间都去度假了吗哈哈哈哈197 | 198199 本科77200 | 201202 已婚77203 | 204205 时间都去哪儿了时间都去哪儿了77时间都去度假了时间都去度假了吗哈哈哈哈206 | 207
| 210 8211 | 212213 Mike88214 | 215216 男88217 | 218219 1523652256388220 | 221222 mikeLoveNike@gmail.com88223 | 224225 深圳市南山区白石洲上白石102栋88时间都去度假了时间都去度假了吗哈哈哈哈226 | 227228 本科88229 | 230231 已婚88232 | 233234 时间都去哪儿了时间都去哪儿了88时间都去度假了时间都去度假了吗哈哈哈哈235 | 236
| 239 9240 | 241242 Mike99243 | 244245 男99246 | 247248 1523652256399249 | 250251 mikeLoveNike@gmail.com99252 | 253254 深圳市南山区白石洲上白石102栋999999时间都去度假了时间都去度假了吗哈哈哈哈255 | 256257 本科99258 | 259260 已婚99261 | 262263 时间都去哪儿了时间都去哪儿了99时间都去度假了时间都去度假了吗哈哈哈哈264 | 265
| 268 10269 | 270271 Mike1010272 | 273274 男1010275 | 276277 152365225631010278 | 279280 mikeLoveNike@gmail.com1010281 | 282283 深圳市南山区白石洲上白石102栋1010284 | 285286 本科1010287 | 288289 已婚1010290 | 291292 时间都去哪儿了时间都去哪儿了1010时间都去度假了时间都去度假了吗293 | 294
| 297 11298 | 299300 Mike1111301 | 302303 男1111304 | 305306 152365225631111307 | 308309 mikeLoveNike@gmail.com1111310 | 311312 深圳市南山区白石洲上白石102栋1111时间都去度假了时间都去度假了吗哈哈哈哈313 | 314315 本科1111316 | 317318 已婚1111319 | 320321 时间都去哪儿了时间都去哪儿了1111时间都去度假了时间都去度假了吗哈哈哈哈322 | 323
| 326 12327 | 328329 Mike1212330 | 331332 男1212333 | 334335 152365225631212336 | 337338 mikeLoveNike@gmail.com1212339 | 340341 深圳市南山区白石洲上白石102栋1212时间都去度假了时间都去度假了吗哈哈哈哈342 | 343344 本科1212345 | 346347 已婚1212348 | 349350 时间都去哪儿了时间都去哪儿了1212时间都去度假了时间都去度假了吗哈哈哈哈351 | 352
| 355 13356 | 357358 Mike1313359 | 360361 男1313362 | 363364 152365225631313365 | 366367 mikeLoveNike@gmail.com1313368 | 369370 深圳市南山区白石洲上白石102栋131313131313时间都去度假了时间都去度假了吗哈哈哈哈371 | 372373 本科1313374 | 375376 已婚1313377 | 378379 时间都去哪儿了时间都去哪儿了1313时间都去度假了时间都去度假了吗哈哈哈哈380 | 381
以上是要准备的，除此之外还需要准备一个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 = "" + $(this).text() + "";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代码的附件，有兴趣的同学可以直接下载，用浏览器打开即可：
以上是小弟个人理解，如果有更好的想法，欢迎拍砖，来辩。