属于你的jQuery提示框Tip插件

插件可以满足常用的提示显示，支持12个方向，支持边框、背景色、文本颜色自定义，支持位置微调、层级微调、宽度间距等参数调整。

先看看效果：

tips:提示信息组件 参数：

• msg:'asdf',内容
• dire:2,方向
• w:250,宽度
• _x:0,横向偏移
• _y:0,纵向偏移
• zIndex:100000,层级
• borderColor:#FFF,边框颜色
• bgColor:#FFF,背景颜色
• useHover:true是否使用悬浮显示
• color:默认提示文字颜色
• padding:边距

javascript代码：

'); this.innerArr = $('

'); this.outerArr = $('

'); this.init(); }; Tip.prototype = { init: function () { var msg = this.tag.data('tipMsg'); if (!this.msg) { this.msg = msg; } this.createTemp(); },createTemp: function () { var t = this; t.createWrap(); t.setPosition(); },createWrap: function () { var t = this; t.wrap.html(t.msg); var wrapCSS = { width: t.width,border: '1px solid ' + t.borderColor,'border-radius': '5px',background: t.bgColor,color: t.color,padding: t.getPadding() }; t.outerArr.css(t.getArrStyle(t.dire,t.arrWidth,t.borderColor)); t.innerArr.css(t.getArrStyle(t.dire,t.bgColor)); t.wrap.prepend(t.innerArr).prepend(t.outerArr).css(wrapCSS); $('body').append(t.wrap); },setPosition: function () { var t = this; var posObj = t.getPos(t.dire,t.getPosition(t.tag),t.getPosition(t.wrap),t.arrWidth),pos = posObj.pos,innerPos = posObj.innerPos,outerPos = posObj.outerPos; t.wrap.css({top: pos.y,left: pos.x}); t.innerArr.css({top: innerPos.y,left: innerPos.x}); t.outerArr.css({top: outerPos.y,left: outerPos.x}); },getPadding: function () { var t = this,pad = '0px',padArr = t.padding,len = padArr.length; switch (len) { case 1: pad = padArr[0] + 'px'; break; case 2: pad = padArr[0] + 'px ' + padArr[1] + 'px'; break; case 3: pad = padArr[0] + 'px ' + padArr[1] + 'px ' + padArr[2] + 'px'; break; case 4: pad = padArr[0] + 'px ' + padArr[1] + 'px ' + padArr[2] + 'px ' + padArr[3] + 'px'; break; } return pad; },getPosition: function (tag) { return {t: tag.offset().top,l: tag.offset().left,h: tag.outerHeight(),w: tag.outerWidth()}; },getArrStyle: function (dir,width,color) { var style; switch (dir) { case 11: case 12: case 1: style = { 'border-bottom-style': 'solid','border-width': '0px ' + width + 'px ' + width + 'px','border-bottom-color': color }; break; case 2: case 3: case 4: style = { 'border-left-style': 'solid','border-width': width + 'px 0px ' + width + 'px ' + width + 'px','border-left-color': color }; break; case 5: case 6: case 7: style = { 'border-top-style': 'solid','border-width': width + 'px ' + width + 'px 0px','border-top-color': color }; break; case 8: case 9: case 10: style = { 'border-right-style': 'solid','border-width': width + 'px ' + width + 'px ' + width + 'px 0px','border-right-color': color }; break; } return style || {}; },getPos: function (d,tagPos,pos,arrWidth) { var _pos,_innerPos,_outerPos,l = tagPos.l,t = tagPos.t,w = tagPos.w,h = tagPos.h,ww = pos.w,hh = pos.h; switch (d) { case 0: case 1: _pos = {x: l + w / 2 + arrWidth + 20 + 1 - ww,y: t + h + arrWidth}; _outerPos = {x: ww - 2 - 20 - arrWidth * 2,y: -arrWidth}; _innerPos = {x: ww - 2 - 20 - arrWidth * 2,y: -arrWidth + 1}; break; case 2: _pos = {x: l - ww - arrWidth,y: t + h / 2 - arrWidth - 20 - 1}; _outerPos = {x: ww - 2,y: 20}; _innerPos = {x: ww - 2 - 1,y: 20}; break; case 3: _pos = {x: l - ww - arrWidth,y: t + h / 2 - hh / 2}; _outerPos = {x: ww - 2,y: (hh - 2) / 2 - arrWidth}; _innerPos = {x: ww - 2 - 1,y: (hh - 2) / 2 - arrWidth}; break; case 4: _pos = {x: l - ww - arrWidth,y: t + h / 2 + arrWidth + 20 + 1 - hh}; _outerPos = {x: ww - 2,y: hh - 2 - 20 - arrWidth * 2}; _innerPos = {x: ww - 2 - 1,y: hh - 2 - 20 - arrWidth * 2}; break; case 5: _pos = {x: l + w / 2 + arrWidth + 20 + 1 - ww,y: t - arrWidth - hh}; _outerPos = {x: ww - 2 - 20 - arrWidth * 2,y: hh - 2}; _innerPos = {x: ww - 2 - 20 - arrWidth * 2,y: hh - 2 - 1}; break; case 6: _pos = {x: l + w / 2 - ww / 2,y: t - arrWidth - hh}; _outerPos = {x: (ww - 2) / 2 - arrWidth,y: hh - 2}; _innerPos = {x: (ww - 2) / 2 - arrWidth,y: hh - 2 - 1}; break; case 7: _pos = {x: l + w / 2 - 20 - arrWidth,y: t - arrWidth - hh}; _outerPos = {x: 20,y: hh - 2}; _innerPos = {x: 20,y: hh - 2 - 1}; break; case 8: _pos = {x: l + w + arrWidth,y: t + h / 2 + arrWidth + 20 + 1 - hh}; _outerPos = {x: -arrWidth,y: hh - 2 - 20 - arrWidth * 2}; _innerPos = {x: -arrWidth + 1,y: hh - 2 - 20 - arrWidth * 2}; break; case 9: _pos = {x: l + w + arrWidth,y: t + h / 2 - hh / 2}; _outerPos = {x: -arrWidth,y: (hh - 2) / 2 - arrWidth}; _innerPos = {x: -arrWidth + 1,y: (hh - 2) / 2 - arrWidth}; break; case 10: _pos = {x: l + w + arrWidth,y: t + h / 2 - arrWidth - 20 - 1}; _outerPos = {x: -arrWidth,y: 20}; _innerPos = {x: -arrWidth + 1,y: 20}; break; case 11: _pos = {x: l + w / 2 - 20 - arrWidth,y: t + h + arrWidth}; _outerPos = {x: 20,y: -arrWidth}; _innerPos = {x: 20,y: -arrWidth + 1}; break; case 12: _pos = {x: l + w / 2 - ww / 2,y: t + h + arrWidth}; _outerPos = {x: (ww - 2) / 2 - arrWidth,y: -arrWidth}; _innerPos = {x: (ww - 2) / 2 - arrWidth,y: -arrWidth + 1}; break; default: _pos = {x: 0,y: 0}; } return { pos: _pos,innerPos: _innerPos,outerPos: _outerPos }; },show: function () { this.wrap.show(); },close: function () { this.wrap.remove(); } }; })(jQuery);

CSS:

.tip-arr-a,.tip-arr-b {
position: absolute;
width: 0;
height: 0;
line-height: 0;
border-style: dashed;
border-color: transparent;
}
page:

<div class="test">
<span data-tip-msg="我是测试数据
我是测试数据
我是测试数据">我是测试数据

效果：