轻量级 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注入技巧
Jun 22 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
基于JavaScript 类的使用详解
May 07 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
vue中mint-ui的使用方法
Apr 04 Javascript
js模拟实现烟花特效
Mar 10 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 Javascript
iview实现图片上传功能
Jun 29 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
php短网址和数字之间相互转换的方法
2015/03/13 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
2015/11/05 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
python 随机数生成的代码的详细分析
2011/05/15 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
python实现kMeans算法
2017/12/21 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
python批量爬取下载抖音视频
2019/06/17 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
Python多线程多进程实例对比解析
2020/03/12 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
英国办公用品商店:Office Outlet
2018/04/04 全球购物
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
材料加工硕士生求职信
2013/10/10 职场文书
工程力学硕士生的自我评价范文
2013/11/16 职场文书
师范院校学生自荐信范文
2013/12/27 职场文书
初一家长会邀请函
2014/01/31 职场文书
文秘个人求职信范文
2014/04/22 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
消防安全标语
2014/06/07 职场文书
2016小学新学期寄语
2015/12/04 职场文书