Tooltip(提示框)是一種常見的效果，它通常用在需要進一步解釋、說明或提示的某個詞上。這種小效果實現起來雖然不難，但如果你想不勞而獲，可以試試 Tips。

由于是在mac下寫的，沒什么低版本瀏覽器測試工具沒做具體的兼容測試，而且我也不是前端還請多多包涵，js庫用的jquery1.11.1，低版本應該也是可以的，需要自己去下jquery，只是寫的好玩，分享一下，希望大家能一起改進

1. /** 
2. * jquery tips 提示插件 jquery.tips.js v0.1beta 
3. * 
4. * 使用方法 
5. * $(selector).tips({ //selector 為jquery選擇器 
6. * msg:'your messages!', //你的提示消息 必填 
7. * side:1, //提示窗顯示位置 1，2，3，4 分別代表 上右下左 默認為1（上） 可選 
8. * color:'#FFF', //提示文字色 默認為白色 可選 
9. * bg:'#F00',//提示窗背景色 默認為紅色 可選 
10. * time:2,//自動關閉時間 默認2秒 設置0則不自動關閉 可選 
11. * x:0,//橫向偏移 正數向右偏移 負數向左偏移 默認為0 可選 
12. * y:0,//縱向偏移 正數向下偏移 負數向上偏移 默認為0 可選 
13. * }) 
14. * 
15. * 
16. */ 
17. (function ($) { 
18. $.fn.tips = function(options){ 
19. var defaults = { 
20. side:1, 
21. msg:'', 
22. color:'#FFF', 
23. bg:'#F00', 
24. time:2, 
25. x:0, 
26. y:0 
27. } 
28. var options = $.extend(defaults, options); 
29. if (!options.msg||isNaN(options.side)) { 
30. throw new Error('params error'); 
31. } 
32. if(!$('#jquery_tips_style').length){ 
33. var style='<style id="jquery_tips_style" type="text/css">'; 
34. style+='.jq_tips_box{padding:10px;position:absolute;overflow:hidden;display:inline;display:none;z-index:10176523;}'; 
35. style+='.jq_tips_arrow{display:block;width:0px;height:0px;position:absolute;}'; 
36. style+='.jq_tips_top{border-left:10px solid transparent;left:20px;bottom:0px;}'; 
37. style+='.jq_tips_left{border-top:10px solid transparent;right:0px;top:18px;}'; 
38. style+='.jq_tips_bottom{border-left:10px solid transparent;left:20px;top:0px;}'; 
39. style+='.jq_tips_right{border-top:10px solid transparent;left:0px;top:18px;}'; 
40. style+='.jq_tips_info{word-wrap: break-word;word-break:normal;border-radius:4px;padding:5px 8px;max-width:130px;overflow:hidden;box-shadow:1px 1px 1px #999;font-size:12px;cursor:pointer;}'; 
41. style+='</style>'; 
42. $(document.body).append(style); 
43. } 
44. this.each(function(){ 
45. var element=$(this); 
46. var element_top=element.offset().top,element_left=element.offset().left,element_height=element.outerHeight(),element_width=element.outerWidth(); 
47. options.side=options.side<1?1:options.side>4?4:Math.round(options.side); 
48. var sideName=options.side==1?'top':options.side==2?'right':options.side==3?'bottom':options.side==4?'left':'top'; 
49. var tips=$('<div class="jq_tips_box"><i class="jq_tips_arrow jq_tips_'+sideName+'"></i><div class="jq_tips_info">'+options.msg+'</div></div>').appendTo(document.body); 
50. tips.find('.jq_tips_arrow').css('border-'+sideName,'10px solid '+options.bg); 
51. tips.find('.jq_tips_info').css({ 
52. color:options.color, 
53. backgroundColor:options.bg 
54. }); 
55. switch(options.side){ 
56. case 1: 
57. tips.css({ 
58. top:element_top-tips.outerHeight()+options.x, 
59. left:element_left-10+options.y 
60. }); 
61. break; 
62. case 2: 
63. tips.css({ 
64. top:element_top-20+options.x, 
65. left:element_left+element_width+options.y 
66. }); 
67. break; 
68. case 3: 
69. tips.css({ 
70. top:element_top+element_height+options.x, 
71. left:element_left-10+options.y 
72. }); 
73. break; 
74. case 4: 
75. tips.css({ 
76. top:element_top-20+options.x, 
77. left:element_left-tips.outerWidth()+options.y 
78. }); 
79. break; 
80. default: 
81. } 
82. var closeTime; 
83. tips.fadeIn('fast').click(function(){ 
84. clearTimeout(closeTime); 
85. tips.fadeOut('fast',function(){ 
86. tips.remove(); 
87. }) 
88. }) 
89. if(options.time){ 
90. closeTime=setTimeout(function(){ 
91. tips.click(); 
92. },options.time*1000); 
93. tips.hover(function(){ 
94. clearTimeout(closeTime); 
95. },function(){ 
96. closeTime=setTimeout(function(){ 
97. tips.click(); 
98. },options.time*1000); 
99. }) 
100. } 
101. }); 
102. return this; 
103. }; 
104. })(jQuery); 

以上所述就是本文的全部內容了，希望大家能夠喜歡。