继续分享一个我自己写的 ToolTip提示插件

继续分享一个我自己写的 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                 else
118                     tooltippos.down();
119                 break;
120             case "down":
121                 if (obj[0].getBoundingClientRect().top + 10 + obj.height() + objtip.outerHeight() < $(window).height())
122                     tooltippos.down();
123                 else
124                     tooltippos.up();
125                 break;
126             case "right":
127                 if (obj[0].getBoundingClientRect().left - 10 - objtip.outerWidth() > 0)
128                     tooltippos.right();
129                 else
130                     tooltippos.left();
131                 break;
132             case "left":
133                 if (obj[0].getBoundingClientRect().left + obj.width() + 10 + objtip.outerWidth() < $(window).width())
134                     tooltippos.left();
135                 else
136                     tooltippos.right();
137         }
138 
139     }
140 }

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