脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS ToolTip

轻量级 JS ToolTip提示效果

 更新时间：2010年07月20日 01:04:22   作者：  
JS ToolTip提示效果，喜欢的朋友可以参考下。
鼠标经过出现的提示效果，比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键盘事件超详细总结

    JavaScript键盘事件超详细总结

    这篇文章主要给大家介绍了关于JavaScript键盘事件的相关资料,键盘事件是指在网页中当用户按下键盘上的按键时所触发的事件,在JavaScript中可以通过监听键盘事件来实现一些交互效果,需要的朋友可以参考下
    2023-10-10
  • 解决bootstrap中modal遇到Esc键无法关闭页面

    解决bootstrap中modal遇到Esc键无法关闭页面

    Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。不过在使用的过程中，我们还是会遇到各种小问题，今天我们探讨的就是个人在使用中遇到的一个小BUG的修复。
    2015-03-03
  • IE中getElementsByName()对有些元素无效的解决方案

    IE中getElementsByName()对有些元素无效的解决方案

    这篇文章主要介绍了IE中getElementsByName()对有些元素无效的解决方案,很简单，很实用，需要的朋友可以参考下
    2014-09-09
  • 让IE8支持DOM 2（不用框架！）

    让IE8支持DOM 2（不用框架！）

    众所周知，IE8开放了对DOM原型的支持以及ECMA v5的两个新方法——Object.defineProperty和Object.getOwnPropertyDexcriptor（单词好长……），并且这两个新方法居然只能用于DOM。
    2009-12-12
  • JavaScript闭包与作用域链实例分析

    JavaScript闭包与作用域链实例分析

    这篇文章主要介绍了JavaScript闭包与作用域链,结合实例形式分析了javascript闭包的具体概念、功能、并对比作用域链分析了闭包的相关使用技巧与注意事项,需要的朋友可以参考下
    2019-01-01
  • 教你如何使用THREEJS实现一个可调节档位、可摇头的电风扇

    教你如何使用THREEJS实现一个可调节档位、可摇头的电风扇

    夏天到了，用Three.js实现一个可以摇头和调节档位的电风扇，主要使用到Blender处理3D模型，用Vite+Typescript搭建项目框架，这篇文章主要介绍了使用THREEJS实现一个可调节档位、可摇头的电风扇,需要的朋友可以参考下
    2023-06-06
  • css 二级菜单 实现代码集合 修正版

    css 二级菜单 实现代码集合 修正版

    最近的网站要求使用二级菜单，本着“能用别人的就用别人的，不能用别人的就用自己的”的原则，在网上找到一个经典的使用CSS制作的二级菜单，感觉不错，先记录下来，以备它用。
    2009-06-06
  • nodejs读取memcache示例分享

    nodejs读取memcache示例分享

    本人主要介绍了使用nodejs如何读取memcache的示例程序，大家参考使用吧
    2014-01-01
  • Array.prototype.slice.apply的使用方法

    Array.prototype.slice.apply的使用方法

    arguments在JavaScript语法中是函数特有的一个对象属性(Arguments对象)，用来引用调用该函数时传递的实际参数。
    2010-03-03
  • js实现一个简单的数字时钟效果

    js实现一个简单的数字时钟效果

    本文主要介绍了js实现一个简单的数字时钟效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-03-03

最新评论