继续分享一个我自己写的 ToolTip提示插件，希望大家支持我，给我点评论，哪怕骂我的也好啊，让我知道有人在关注我“小豆” 嘿嘿。废话不多说上代码！

  1 $.fn.ToolTip = function (option) {  2     var defaults = {  3         direction: "down",  4         star: function () { },  5         from: $(this),  6         url: '../images/arrow.png'  7     };  8   9     //方法内基础变量 10     var opt = $.extend(defaults, option), 11         dirarray = ['up', 'down', 'left', 'right'], 12          left = 0, top = 0, _left = 0, _top = 0, arrow_w = 15, arrow_h = 60, timeout, arrow = '0 0'; 13  14     //开始遍历 15     $(this).each(function () { 16         var obj = $(this); 17         obj.on({ 18             mouseenter: function () { 19                 GetPos(obj); 20                 var objtip = $("<div class='tooltip'></div>").css({ 21                     position: "absolute", 22                     top: top, 23                     left: left, 24                     border: "solid 1px #ccc", 25                     width: $("#" + obj.attr("data-tooltip")).outerWidth(true), 26                     height: $("#" + obj.attr("data-tooltip")).outerHeight(true), 27                     'border-radius': '8px 8px', 28                     'background-color': '#fff', 29                     'z-index': 999 30                 }).appendTo(obj); 31                 var objtiphead = $("<div></div>").css({ 32                     width: arrow_w == 30 ? objtip.outerWidth(true) : 15, 33                     height: arrow_h == 30 ? objtip.outerHeight(true) : 15, 34                     position: "absolute", 35                     top: _top, 36                     left: _left 37                 }).appendTo(objtip); 38  39                 var objtiparrow = $("<div></div>").css({ 40  41                     width: arrow_w, 42                     height: arrow_h, 43                     "background-image": "url(" + opt.url + ")", 44                     "background-repeat": "no-repeat", 45                     "background-position": arrow 46                 }).appendTo(objtiphead); 47                 objtip.append($("#" + obj.attr("data-tooltip")).clone().show()); 48  49                 objtip.on({ 50                     mouseenter: function () { 51  52                         obj.data({ 53                             attip: true 54                         }); 55                     }, mouseleave: function () { 56  57                         $(".tooltip").remove(); 58                         obj.removeData("attip"); 59                     } 60                 }); 61             } 62         , mouseleave: function () { 63             if (!obj.data("attip")) 64                 $(".tooltip").remove(); 65             obj.removeData("attip"); 66         } 67  68         }); 69     }); 70     //得出位置 71     var GetPos = function (obj) { 72         var objtip = $("#" + obj.attr("data-tooltip")); 73         var tooltippos = { 74             up: function () { 75                 arrow_w = 30; arrow_h = 15; 76                 top = obj.position().top - 12 - objtip.outerHeight(true); 77                 left = obj.position().left; 78                 _top = objtip.outerHeight(true); 79                 _left = 15; 80                 arrow = '-50px -50px'; 81             }, 82             down: function () { 83                 arrow_w = 30; arrow_h = 15; 84                 top = obj.position().top + 12 + obj.height(); 85                 left = obj.position().left; 86                 _top = -15; 87                 _left = 15; 88                 arrow = '-50px 0'; 89             }, 90             right: function () { 91                 arrow_w = 15; 92                 arrow_h = 30; 93                 top = obj.position().top; 94                 left = obj.position().left - 12 - objtip.outerWidth(true); 95                 _top = 15; 96                 _left = objtip.outerWidth(true); 97                 arrow = '-80px -20px'; 98             }, 99             left: function () {100                 arrow_w = 15;101                 arrow_h = 30;102                 top = obj.position().top;103                 left = obj.position().left + obj.width() + 12;104                 _top = 15;105                 _left = -15;106                 arrow = '0 -20px';107             }108         };109         opt.star();110 111         opt.direction = $.inArray(opt.direction, dirarray) != -1 ? opt.direction : "down";112 113         switch (opt.direction) {114             case "up":115                 if (obj[0].getBoundingClientRect().top - 10 - objtip.outerHeight() > 0)116                     tooltippos.up();117                 else118                     tooltippos.down();119                 break;120             case "down":121                 if (obj[0].getBoundingClientRect().top + 10 + obj.height() + objtip.outerHeight() < $(window).height())122                     tooltippos.down();123                 else124                     tooltippos.up();125                 break;126             case "right":127                 if (obj[0].getBoundingClientRect().left - 10 - objtip.outerWidth() > 0)128                     tooltippos.right();129                 else130                     tooltippos.left();131                 break;132             case "left":133                 if (obj[0].getBoundingClientRect().left + obj.width() + 10 + objtip.outerWidth() < $(window).width())134                     tooltippos.left();135                 else136                     tooltippos.right();137         }138 139     }140 }

经测试，好像IE7 箭头有指向错误，大家可以修改下。小问题啦，洒洒水啦~