JS实现tooltip的封装

　　Tooltip就是将鼠标停留某页面元素上，出现该元素的提示信息。一般应用中，我们指定title的值即可实现，当然他在一定时间后会消失。如果不让他消失，或者要显示一些有特别样式的提示信息，就要自己定义层来实现这样的tooltip，所以Tooltip的实现就是在元素的指定位置显示这样的层。首先贴上code~

 

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > tooltip </ title >
< script type ="text/javascript" >
var Common = {
getItself: function (id) {
return " string " == typeof id ? document.getElementById(id) : id;
},
getEvent: function () { // ie/ff
if (document.all) {
return window.event;
}
func = getEvent.caller;
while (func != null ) {
var arg0 = func.arguments[ 0 ];
if (arg0) {
if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || ( typeof (arg0) == " object " && arg0.preventDefault && arg0.stopPropagation)) {
return arg0;
}
}
func = func.caller;
}
return null ;
},
getMousePos: function (ev) {
if ( ! ev) {
ev = this .getEvent();
}
if (ev.pageX || ev.pageY) {
return {
x: ev.pageX,
y: ev.pageY
};
}

if (document.documentElement 00;">&& document.documentElement.scrollTop) {
return {
x: ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,
y: ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop
};
}
else if (document.body) {
return {
x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y: ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
},
getElementPos: function (el) {
el = this .getItself(el);
var _x = 0 , _y = 0 ;
do {
_x += el.offsetLeft;
_y += el.offsetTop;
} while (el = el.offsetParent);
return { x: _x, y: _y };
},
getTextSize: function (text) {
var span = document.createElement( " span " );
var result = {};
result.width = span.offsetWidth;
result.height = span.offsetWidth;
span.style.visibility = " hidden " ;
document.body.appendChild(span);
if ( typeof span.textContent != " undefined " )
span.textContent = text;
else span.innerText = text;
result.width = span.offsetWidth - result.width;
result.height = span.offsetHeight - result.height;
span.parentNode.removeChild(span);
return result;
}
}
// -----------------------------------------------------------------------------------------------------------
var ToolTip = {
showToolTip: function (param, linkObj, e) {
var ev = e || window.event;
var mosPos = Common.getMousePos(ev);
var elPos = Common.getElementPos(linkObj);
var upMouseLeft = 8 , downMouseLeft = 13 ; // div水平方向在上面/下面偏移鼠标位置
var div;
if (document.getElementById( " toolTipDiv " )) {
document.body.removeChild(document.getElementById( " toolTipDiv " ));
}
div = document.createElement( " div " );
div.id = " toolTipDiv " ;
div.style.cssText = " position:absolute;border:solid 1px black;display:none;background-color:White; " ;
div.innerHTML = linkObj.tip;
document.body.appendChild(div);
if (param && param.width) { // 如未设置，默认一行显示
if (Common.getTextSize(div.innerHTML).width < param.width) {
div.style.maxWidth = param.width + " px " ;
} else {
div.style.width = param.width + " px " ;
}

}

div.style.display = "" ; // must before set opr to get offsetHeight...
// /set tooltip position
if (elPos.y - div.offsetHeight < document.documentElement.scrollTop) {
div.style.top = elPos.y + linkObj.offsetHeight + " px " ;
if (mosPos.x + div.offsetWidth + document.documentElement.clientLeft > Common.getViewportSize.w - 20 ) {
div.style.left = mosPos.x - downMouseLeft - div.offsetWidth + " px " ;
} else {
div.style.left = mosPos.x + downMouseLeft + " px " ;
}
}
else {
div.style.top = elPos.y - div.offsetHeight + " px " ;
if (mosPos.x + div.offsetWidth + document.documentElement.clientLeft > Common.getViewportSize.w - 20 ) {
div.style.left = mosPos.x - upMouseLeft - div.offsetWidth + " px " ;
} else {
div.style.left = mosPos.x + upMouseLeft + " px " ;
}
}

// /hide tooltip after some time
if (param && param.time) {
setTimeout( this .hidToolTip, param.time);
}
},
hidToolTip: function () {
if (document.getElementById( " toolTipDiv " )) {
document.getElementById( " toolTipDiv " ).style.display = " none " ;
}
},
addTips: function (param) {
var linkArr = document.getElementsByTagName( " a " );
if ( ! linkArr) { return false ; }
for (i = 0 ; i < linkArr.length; i ++ ) {
if (linkArr[i].className == " toolTip " ) {
linkArr[i].tip = linkArr[i].title;
var tipObj = this ;
linkArr[i].onmouseover = function (e) { tipObj.showToolTip(param, this , e); }
linkArr[i].onmouseout = tipObj.hidToolTip;
if (param && param.moveable == true ) { // 默认不滚动
linkArr[i].onmousemove = function (e) { tipObj.showToolTip(param, this , e); }
}
linkArr[i].title = "" ;
}
}
}
}

window.onload = function () {
ToolTip.addTips({ width: 200 }); // time:5000, moveable: true
}
</ script >
</ head >
< body style ="min-width:700px; " >
< script type ="text/javascript" >
Common.getViewportSize = { w: (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : (document.body ? document.body.offsetWidth : 0 ), h: (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : (document.body ? document.body.offsetHeight : 0 ) };
</ script >
< a href ="#" class ="toolTip" title ="Top Value, display below" > Host name </ a >
< div style ="height:200px;" ></ div >
< a style ="float:right" href ="#" class ="toolTip" title ="BI Scorecard , Exclusion Rules - Host name , Omniture Active has been updated " > Omniture Host name Active has been updated </ a >
< div style ="height:200px;" ></ div >
< a href ="#" class ="toolTip" title ="BI Scpdated orecard , Exclusion Rul niture Ac" > Exclusion Rules - Host name </ a >
< br />< br />< br />
< a href ="#" class ="toolTip" title ="BI Scp" > Host name </ a >
</ body >
</ html >

 

使用：在window.onload中调用：ToolTip.addTips()。可以设置可选参数如：{ width: 200, time:5000, moveable: true } 。width表示显示内容宽度200px，超过则换行，默认未设置则提示内容在一行中显示。time:5000表示在提示内容显示5秒后消失，默认未设置则永远不消失。moveable: true表示，当鼠标在该元素上移动时，显示内容的层跟随鼠标移动，默认未设置则不移动，如title就是不移动的。

 

一些实现的注意点：文档加载时执行的ToolTip.addTips对所有class是toolTip的文档链接元素a绑定onmouseover，onmouseout，onmousemove事件，并把原来的title值清空（如果是其他类型元素，或者其他的需求，进行相关修改即可）。

主要的实现方法就是ToolTip.showToolTip。upMouseLeft，downMouseLeft是设置层的左边沿离鼠标的距离，如果层在a元素上面显示，则取upMouseLeft，下面显示则取downMouseLeft，这个设置仅是为了效果更好，使层在垂直方向不是正对着鼠标位置。默认层是在元素a的上方和鼠标右方显示，当上方显示不下时在下方显示，当右侧显示不下时在左侧显示，具体见code的If判断。

 

很多框架提供的tooltip很酷，如下

其实就是1个图片的DIV+内容DIV，点此下载查看。

 

点击下载

转载于:https://www.cnblogs.com/ljchow/archive/2010/05/31/1748639.html