基于jquery的自定义鼠标提示效果 jquery.toolTip


Posted in Javascript onNovember 14, 2010

IE下效果

基于jquery的自定义鼠标提示效果 jquery.toolTip

Firefox或其它浏览器效果

基于jquery的自定义鼠标提示效果 jquery.toolTip
代码

//版权 酷车中国 www.kuchechina.com 
//作者 逐月 zhuyue.cnblogs.com 
//演示 http://www.kuchechina.com/carstools/Default.aspx 
jQuery.fn.toolTip = function() { 
this.unbind().hover( 
function(e) { 
this.t = this.title; 
this.title = ''; 
$('body').append( '<p id="p_toolTip" style="display:none; max-width:320px;text-align:left;"><img id="img_toolTip_Arrow" src="images/arrow.gif" />' + this.t + '</p>' ); 
var tip = $('p#p_toolTip').css({ "position": "absolute", "padding": "10px 5px 5px 10px", "left": "5px", "font-size": "14px", "background-color": "white", "border": "1px solid #a6c9e2","line-height":"160%", "-moz-border-radius": "5px", "-webkit-border-radius": "5px", "z-index": "9999"}); 
var target = $(this); 
var position = target.position(); 
this.top = (position.top - 8); this.left = (position.left + target.width() + 5); 
$('p#p_toolTip #img_toolTip_Arrow').css({"position": "absolute", "top": "8px", "left": "-6px" }); 
tip.css({"top": this.top+"px","left":this.left+"px"}); 
tip.fadeIn("slow"); 
}, 
function() { 
this.title = this.t; 
$("p#p_toolTip").fadeOut("slow").remove(); 
} 
); 
};

使用方法:
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#tootlsMain img[title]").toolTip(); 
}); 
</script>

可以利用jquery 选择器,选择带title属性的标签,当然可以适当的修改代码使适用带alt属性标签。
title属性支持简单html标签。如<br/>等。注意引号的使用
实现原理:
利用标签title属性,使hover事件取代默认鼠标事件,显示浮动层。this.unbind().hover 就是这句代码。jquery帮我们做好很多事情。堆积我们的现实代码就行。
程序员,文笔一般希望您能看懂。

代码下载

Javascript 相关文章推荐
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
javascript实现微信分享
Dec 23 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
Vue.js数据绑定之data属性
Jul 07 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
JS 数组基本用法入门示例解析
Jan 16 Javascript
Vue项目移动端滚动穿透问题的实现
May 19 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 #Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 #Javascript
javascript 学习笔记(onchange等)
Nov 14 #Javascript
javascript取消文本选定的实现代码
Nov 14 #Javascript
IE6下通过a标签点击切换图片的问题
Nov 14 #Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 #Javascript
在次封装easyui-Dialog插件实现代码
Nov 14 #Javascript
You might like
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
php cookie 登录验证示例代码
2009/03/16 PHP
php中判断数组是一维,二维,还是多维的解决方法
2013/05/04 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
PHP实现微信退款功能
2018/10/02 PHP
PDO实现学生管理系统
2020/03/21 PHP
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
python批量修改文件后缀示例代码分享
2013/12/24 Python
python实现百度关键词排名查询
2014/03/30 Python
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
Python实现学生成绩管理系统
2020/04/05 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
国际经济贸易专业推荐信
2013/11/06 职场文书
销售业务员岗位职责
2014/01/29 职场文书
语文教学随笔感言
2014/02/18 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
二手车转让协议书
2015/01/29 职场文书
财政局个人年终总结
2015/03/03 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
如何在C++中调用Python
2021/05/21 Python