js实现动态控件提示信息模版

1、在需要提示控件里加上以下属性，例如

<input type="button" class="ToolTips ToolTipCol" value="点击" data-text="这是说明这是说明这是说明这是说明这是说明这是说明这是说明这是说明这是说明这是说明">

ToolTips 表示开启提示

ToolTipCol 提示样式1：例图：

ToolTipCols 提示样式2：例图：这里要说明一下，控件里的data-text不一样，要有"|"这个分割，如下

<input type="button" class="ToolTips ToolTipCols" value="点击" data-text="类型|这是说明这是说明这是说明这是说明这是说明这是说明这是说明这是说明这是说明这是说明">

2、js 要求要有jquery.js文件，并放在前面

3、js文件

var Util = Util || {};


Util.stopBubble = function(e) {
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true
};


Util.ToolTip = {
x : 20,
y : 20,
zindex : 99999,
timer : 200,
toolClass : 'tool-tip',
tipClass : 'ToolTips',
tipID : 'ToolTip',
wid : 300,
hei : 0,
init : function() {
$('.' + Util.ToolTip.tipClass).bind('mouseenter', function(e) {
Util.stopBubble(e);
var self = $(this);
var txt = self.attr('data-text');
Util.ToolTip.createHTML(self, txt)
}).click(function(e) {
Util.stopBubble(e);
var self = $(this);
var txt = self.attr('data-text');
if (typeof ($('#' + Util.ToolTip.tipID)[0]) === 'undefined') {
Util.ToolTip.createHTML(self, txt)
}
;
return false
})
},
createHTML : function(self, txt) {
if (!(txt == '' || txt == 'undefined' || txt == null)) {
$('#' + Util.ToolTip.tipID).remove();
var items = [], html = '';
items = $.trim(txt).split("|");
if (self.hasClass('ToolTipCol')) {
html += '<div id="'
+ Util.ToolTip.tipID
+ '" class="'
+ Util.ToolTip.toolClass
+ '" style="position:absolute;left:-10000px;top:-10000px;display:block">';
html += '<div class="items tool-tip-col">' + items + '</div>'
} else if (self.hasClass('ToolTipCols')) {
html += '<div id="' + Util.ToolTip.tipID + '" class="'
+ Util.ToolTip.toolClass
+ '" style="width:320px;display:none">';
html += '<div class="items tool-tip-cols">';
html += '<ul class="title"><li class="y_0">类型</li><li class="y_1">说明</li></ul>';
html += '<ul>';
for (var i = 0; i < items.length; i++) {
html += '<li class="y_' + i + '">' + items[i] + '</li>'
}
;
html += '</ul>';
html += '</div>'
}
;
html += '<b class="ar_up"></b><b class="ar_up_in"></b></div>';
$('body').append(html);
var tar = $('#' + Util.ToolTip.tipID);
tar.show(function() {
Util.getPOP(self, tar, Util.ToolTip.wid)
});
Util.getPOP(self, tar, Util.ToolTip.wid);
tar.mouseleave(function() {
tar.remove()
});
tar.click(function(e) {
Util.stopBubble(e)
});
$(document).click(function() {
tar.remove()
})
}
}
};


Util.getPOP = function(self, tar, wid) {
var aTop = self.offset().top;
var aLeft = self.offset().left;
var aHeight = self.outerHeight();
var aWidth = self.outerWidth();
var tmpWidth = tar.width();
var tmpHeight = tar.height();
var tmpTop = aTop;
var tmpLeft = aLeft + aWidth / 2;
var up = tar.find('.ar_up');
var upInner = tar.find('.ar_up_in');
if (self.hasClass('ToolTipCols')) {
tmpWidth = tar.width()
} else {
if (tmpWidth > wid) {
tmpWidth = wid
} else {
tmpWidth = tar.width()
}
}
;
var tipY = $(window).height() - (aTop + tmpHeight);
var tipX = $(window).width() - (aLeft + tmpWidth);
if (tipX < Util.ToolTip.x) {
tmpLeft = tmpLeft - (tmpWidth - aWidth / 2) + 5;
up.css({
left : 'auto',
right : 5 + 'px',
marginLeft : '0'
});
upInner.css({
left : 'auto',
right : 5 + 'px',
marginLeft : '0'
})
} else {
if (tmpLeft < tmpWidth) {
tmpLeft = tmpLeft - aWidth / 2 - 5;
up.css({
left : 5 + 'px',
marginLeft : '0'
});
upInner.css({
left : 5 + 'px',
marginLeft : '0'
})
} else {
tmpLeft = tmpLeft - tmpWidth / 2
}
}
;
if (tipY < Util.ToolTip.y) {
tmpTop = tmpTop - aHeight - tmpHeight;
up.addClass('ar_down');
upInner.addClass('ar_down_in')
} else {
tmpTop = tmpTop + aHeight + 12;
if (self.hasClass('ToolTipCols')) {
upInner.css({
'border-color' : 'transparent transparent #e8ecef transparent'
})
}
}
;
tar.css({
position : 'absolute',
top : tmpTop,
left : tmpLeft,
width : tmpWidth,
zIndex : Util.ToolTip.zindex
});
tar.fadeIn('slow')
};


$(function() {
Util.ToolTip.init();
});

4、css文件

* {
padding: 0px;
margin: 0px;
}
body {
font: 13px/1.5 Microsoft YaHei, Helvetica, Tahoma;
color: #475058;
}
b{
font-style: normal
}
ul{
    list-style: outside none none;
}
.tool-tip .items {
background: none repeat scroll 0% 0% #FFF;
border: 1px solid #C0C9CE;
border-radius: 3px;
color: #8A949C;
font-size: 12px;
}


.tool-tip-col {
padding: 10px 15px;
}


.tool-tip .ar_up,.tool-tip .ar_up_in,.tool-tip .ar_down,.tool-tip .ar_down_in
{
position: absolute;
left: 50%;
top: -16px;
overflow: hidden;
margin-left: -8px;
width: 0px;
height: 0px;
font-size: 0px;
border-width: 8px;
border-style: dashed dashed solid;
border-color: transparent transparent #ADADAD;
}


.tool-tip .ar_up_in {
top: -15px;
border-color: transparent transparent #FFF;
}


.tool-tip .ar_down,.tool-tip .ar_down_in {
top: auto;
bottom: -16px;
border-style: solid dashed dashed dashed;
border-color: #bac6cd transparent transparent transparent
}


.tool-tip .ar_down_in {
top: auto;
bottom: -15px;
border-color: #fff transparent transparent transparent
}
.tool-tip-cols ul, .tool-tipbag ul {
    overflow: hidden;
    list-style: outside none none;
    padding: 10px 15px;
}


.tool-tip-cols ul.title, .tool-tipbag ul.title {
    height: 40px;
    line-height: 40px;
    padding: 0px 15px;
    background: none repeat scroll 0% 0% #E8ECEF;
}
.tool-tip-cols li, .tool-tipbag li {
    text-align: left;
    float: left;
    display: inline;
}
.tool-tip-cols li.y_0 {
    width: 25%;
}
.tool-tip-cols li.y_1 {
    width: 74%;
}