如何实现ToolTip动态输出的效果？

CSS:
.tipBody{
background-color: #000066;
border:1px solid #C8D8EC;
}
.tipTitle{
background-color: #17305E;
color: #fff;
font-size: 12px;
font-weight:bold;
padding-left:5px;
padding-right:5px;
}
.tipMessage{
background-color: #C8D8EC;
color: #233C6D;
font-size: 12px;
line-height : 15px ;
}
JS:
function ToolTips(idNameSpace){
var preFix=idNameSpace||"plts";//id namespace
var pltsoffsetX = 10; // 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适
var pltsoffsetY = 15; // 弹出窗口位于鼠标下方的距离；3-12 合适
var pltsPoptop;
var pltsPopbot;
var topleft;
var topright;
var botleft;
var botright;
var pltsMsg;
var frm=null;
var _plane=null;
var _bindObj=null;
var _timerShow;
var _timerHide;
var showInterval=500;
var hideInterval=2000;
var isIE = /msie/i.test(navigator.userAgent)&&(!/opera/i.test(navigator.userAgent));
var init=function (){
_plane=document.createElement("div");
_plane.style.display="none";
_plane.style.position="absolute";
_plane.style.zIndex="20088";
var toolTipTalbe=document.createElement("table");
toolTipTalbe.border="0";
if (isIE) {
toolTipTalbe.style.filter="alpha(opacity=90) shadow(color=#bbbbbb,direction=135)";
}
var row=toolTipTalbe.insertRow(0);
var cell=row.insertCell(0);

var oHtml=new Array();
oHtml.push('<table class=tipBody cellspacing="1" cellpadding="0" style="width:100%">');
oHtml.push('<tr id='+preFix+'Poptop ><th height=18 valign=bottom class=tipTitle >');
oHtml.push('</th></tr>');
oHtml.push('<tr><td id='+preFix+'Msg class=tipMessage style="padding-left:14px;padding-right:14px;padding-top: 6px;padding-bottom:6px;line-height:135%"></td></tr>');
oHtml.push('<tr id='+preFix+'Popbot style="display:none"><th height=18 valign=bottom class=tipTitle>');
oHtml.push('</th></tr>' +'</table>');
cell.innerHTML=oHtml.join("");
_plane.appendChild(toolTipTalbe);
toolTipTalbe.style.width = Math.min(_plane.clientWidth, document.body.clientWidth / 2.2);
document.body.appendChild(_plane);
pltsPoptop=document.getElementById(preFix+'Poptop');
pltsPopbot=document.getElementById(preFix+'Popbot');
topleft=document.getElementById(preFix+'topleft');
topright=document.getElementById(preFix+'topright');
botleft=document.getElementById(preFix+'botleft');
botright=document.getElementById(preFix+'botright');
pltsMsg=document.getElementById(preFix+'Msg');
if (isIE) {
ifm = document.createElement("iframe");
var s = ifm.style;
ifm.frameBorder = 0;
if (_plane.style.height) {

s.height = _plane.style.height + parseInt(_plane.currentStyle.borderTopWidth, 10) + parseInt(_plane.currentStyle.borderBottomWidth, 10);
s.top = -parseInt(_plane.currentStyle.borderTopWidth, 10) + "px";
s.left = -parseInt(_plane.currentStyle.borderLeftWidth, 10) + "px";
s.width = parseInt(_plane.style.width, 10) + parseInt(_plane.currentStyle.borderLeftWidth, 10) + parseInt(_plane.currentStyle.borderRightWidth, 10) + "px";
}else
{
s.height = _plane.clientHeight;
s.top = "0px";
s.left = "0px";
s.width = _plane.clientWidth;
}
s.visibility = "inherit";
s.filter = "alpha(opacity=0)";
s.position = "absolute";
s.zIndex = -1;
_plane.insertAdjacentElement("afterBegin",ifm);

}
_plane.x=0;
_plane.y=0;

}
function moveToMouseLoc(){
var o = event.srcElement;
if(o==_bindObj){
if (Math.abs(event.x - _plane.x) > 5 || Math.abs(event.y - _plane.y) > 5) {
clearTimeout(_timerHide);
clearTimeout(_timerShow);
_timerShow = setTimeout(showTip, showInterval);
moveTip(event.x, event.y);
}
if (_plane.style.display == 'block'&&(Math.abs(event.x - _plane.x) > 0 || Math.abs(event.y - _plane.y) >0)) {
moveTip(event.x, event.y);
}
return true;
}
/*o.oldAlt=o.alt||o.oldAlt;
o.oldTitle=o.title||o.oldTitle;
o.alt="";
o.title="";*/
var pltsPop =o.value; //修改这里改变提示的内容o.oldTitle||o.oldAlt;
if (pltsPop) {
_plane.style.left = -1000;
clearTimeout(_timerHide);
clearTimeout(_timerShow);
_timerShow=setTimeout(showTip,showInterval);
var Msg = pltsPop.replace(/\n/g, " ");
Msg = Msg.replace(/\0x13/g, " ");
//提取标题
var pltsTitle;
var re = /\{(.[^\{]*)\}/ig;
if (!re.test(Msg))
pltsTitle = "提示";
else {
re = /\{(.[^\{]*)\}(.*)/ig;
pltsTitle = Msg.replace(re, "$1") + " ";
re = /\{(.[^\{]*)\}/ig;
Msg = Msg.replace(re, "");
Msg = Msg.replace(" ", "");
}
pltsMsg.innerHTML=Msg;
topleft.innerHTML="↖"+pltsTitle;
topright.innerHTML="↗"+pltsTitle;
botleft.innerHTML="↙"+pltsTitle;
botright.innerHTML="↘"+pltsTitle;
_bindObj=o;
}else{
hideTip();
return true;
}
if (isIE) {
var s = ifm.style;
if (_plane.style.height) {

s.height = _plane.style.height + parseInt(_plane.currentStyle.borderTopWidth, 10) + parseInt(_plane.currentStyle.borderBottomWidth, 10);
s.top = -parseInt(_plane.currentStyle.borderTopWidth, 10) + "px";
s.left = -parseInt(_plane.currentStyle.borderLeftWidth, 10) + "px";
s.width = parseInt(_plane.style.width, 10) + parseInt(_plane.currentStyle.borderLeftWidth, 10) + parseInt(_plane.currentStyle.borderRightWidth, 10) + "px";
}else
{
s.height = _plane.clientHeight;
s.top = "0px";
s.left = "0px";
s.width = _plane.clientWidth;
}
}
moveTip(event.x,event.y);
return true;
}
var moveTip = function(x, y){
var popHeight = _plane.clientHeight;
var popWidth = _plane.clientWidth;
if (y + pltsoffsetY + popHeight > document.body.clientHeight) {
popTopAdjust = -popHeight - pltsoffsetY * 1.5;
pltsPoptop.style.display = "none";
pltsPopbot.style.display = "";
}
else {
popTopAdjust = 0;
pltsPoptop.style.display = "";
pltsPopbot.style.display = "none";
}
if (x + pltsoffsetX + popWidth > document.body.clientWidth) {
popLeftAdjust = -popWidth - pltsoffsetX * 2;
topleft.style.display = "none";
botleft.style.display = "none";
topright.style.display = "";
botright.style.display = "";
}
else {
popLeftAdjust = 0;
topleft.style.display = "";
botleft.style.display = "";
topright.style.display = "none";
botright.style.display = "none";
}
_plane.x=x;
_plane.y=y;
_plane.style.left = x + pltsoffsetX + document.body.scrollLeft + popLeftAdjust;
_plane.style.top = y + pltsoffsetY + document.body.scrollTop + popTopAdjust;
}
var showTip=function(){
if (_plane.style.display != 'block') {
_plane.style.display = 'block';
clearTimeout(_timerHide);
_timerHide=setTimeout(hideTip,hideInterval);
}

}
var hideTip=function(){
_plane.style.display = 'none';
}
init();
document.body.attachEvent("onmousemove",moveToMouseLoc);}
window.attachEvent("onload",function(){var t=new ToolTips();});

调试易

如何实现ToolTip动态输出的效果？

解决方案 »