轻量级 JS ToolTip提示效果


Posted in Javascript onJuly 20, 2010

鼠标经过出现的提示效果,比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>

使用效果:
轻量级 JS ToolTip提示效果
上面的$("id")作用等价于document.getElementById("id")
AttachTip:function(){}, //添加提示绑定
DetachTip:function(){}, //移除提示绑定
这两行,可以用动态绑定事件完成,因为项目里面用不着,所以暂时没加
Javascript 相关文章推荐
javascript document.referrer 用法
Apr 30 Javascript
JQuery在光标位置插入内容的实现代码
Jun 18 Javascript
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
js简单实现删除记录时的提示效果
Dec 05 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
js实现按座位号抽奖
Apr 05 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
vue总线机制(bus)知识点详解
May 10 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 #Javascript
根据出生日期自动取得星座的js代码
Jul 20 #Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 #Javascript
Javascript实现CheckBox的全选与取消全选的代码
Jul 20 #Javascript
js下写一个事件队列操作函数
Jul 19 #Javascript
js+css在交互上的应用
Jul 18 #Javascript
基于jQuery试卷自动排版系统
Jul 18 #Javascript
You might like
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
小偷PHP+Html+缓存
2006/12/20 PHP
Phpbean路由转发的php代码
2008/01/10 PHP
php表单转换textarea换行符的方法
2010/09/10 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
python3序列化与反序列化用法实例
2015/05/26 Python
PyQT实现多窗口切换
2018/04/20 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
英国医生在线预约:Top Doctors
2019/10/30 全球购物
家庭贫困证明范本(经典版)
2014/09/22 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL