轻量级 JS ToolTip提示效果

所属分类: 网络编程 / JavaScript 阅读数: 1794
收藏 0 赞 0 分享
鼠标经过出现的提示效果,比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;i<arguments.length;i++){
tempStr+="<p>"+arguments[i]+"</p>";
}
}
$("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调用:
复制代码 代码如下:

<body>
<input type="button" value="hover me" onmouseover='ToolTip.ShowTip(this,"<b>日期:</b>2010-7-19");' onmouseout='ToolTip.HideTip();' style="margin:200px 100px;" />
</body>
<script type="text/javascript">
//initialize tooltip control
ToolTip.Init();
</script>


使用效果:

上面的$("id")作用等价于document.getElementById("id")
AttachTip:function(){}, //添加提示绑定
DetachTip:function(){}, //移除提示绑定
这两行,可以用动态绑定事件完成,因为项目里面用不着,所以暂时没加
更多精彩内容其他人还在看

JavaScript this关键字指向常用情况解析

这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue-cli打包后如何本地查看的操作

这篇文章主要介绍了Vue-cli打包后如何本地查看的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue cli 3.0通用打包配置代码,不分一二级目录

这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JavaScript事件循环及宏任务微任务原理解析

这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

关于vue-cli3打包代码后白屏的解决方案

这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue打包静态资源后显示空白及static文件路径报错的解决

这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue-cli3访问public文件夹静态资源报错的解决方式

这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS继承实现方法及优缺点详解

这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue或react项目生产环境去掉console.log的操作

这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多