轻量级 JS ToolTip提示效果_javascript技巧-js教程-PHP中文网

轻量级 JS ToolTip提示效果_javascript技巧

php中文网

发布： 2016-05-16 18:22:41

原创

1638人浏览过

鼠标经过出现的提示效果，比title更漂亮，可订制。
JS：

//---------------------------tooltip效果 start-----------------------------------
//获取某个html元素的定位
function GetPos(obj){
var pos=new Object();
pos.x=obj.offsetLeft;
pos.y=obj.offsetTop;
while(obj=obj.offsetParent){
pos.x+=obj.offsetLeft;
pos.y+=obj.offsetTop;
}
return pos;
};

//提示工具
var ToolTip={
_tipPanel:null,
Init:function(){
if(null==this._tipPanel){
var tempDiv=document.createElement("div");
document.body.insertBefore(tempDiv, document.body.childNodes[0]);
tempDiv.id="tipPanel";
tempDiv.style.display="none";
tempDiv.style.position="absolute";
tempDiv.style.zIndex="999";
}
},
AttachTip:function(){}, //添加提示绑定
DetachTip:function(){}, //移除提示绑定
ShowTip:function(oTarget){
if($("tipPanel")==null)
return;

/*操作流程
*1、构建新的html片段
*2、设置提示框新位置
*3、显示提示框
*/
//1.
var tempStr=""; //html片段
if(arguments.length>1){
for(var i=1;itempStr+="

"+arguments[i]+"

西语写作助手

西语助手旗下的AI智能写作平台，支持西语语法纠错润色、论文批改写作

查看详情

";
}
}
$("tipPanel").innerHTML=tempStr;
//2.
var pos=GetPos(oTarget);
$("tipPanel").style.left=(oTarget.offsetWidth/2+pos.x)+"px";
$("tipPanel").style.top=(oTarget.offsetHeight+pos.y)+"px";
//3.
$("tipPanel").style.display="";
},
HideTip:function(){
if($("tipPanel")==null)
return;
$("tipPanel").style.display="none";
}
};

//---------------------------tooltip效果 end-----------------------------------

CSS：

复制代码代码如下:

 
#tipPanel{ background:white; padding:6px 8px; width:300px; border:solid 4px #09c; font-size:14px; color:#555;} 
#tipPanel p{ margin:0px;} 
#tipPanel b{ color:red; font-size:14px;} 

HTML调用：

复制代码代码如下:

使用效果：