插件可以满足常用的提示显示，支持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:
position: absolute;
width: 0;
height: 0;
line-height: 0;
border-style: dashed;
border-color: transparent;
}
page:
<div class="test">
<span data-tip-msg="我是测试数据
我是测试数据
我是测试数据">我是测试数据
效果：
提示框（Tip）插件，希望大家可应用到自己的项目中，有所收获。
