继续分享一个我自己写的 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 $("#" + 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 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 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 箭头有指向错误，大家可以修改下。小问题啦，洒洒水啦~
效果图：
当然，里面是什么内容，那就要自己创造了，我只是写了一个展示div，用法很简单的。