基于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 相关文章推荐
JS获取url链接字符串 location.href
Dec 23 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
关于express与koa的使用对比详解
Jan 25 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
express启用https使用小记
May 21 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
JS实现数组去重的11种方法总结
Apr 04 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
php header()函数使用说明
2008/07/10 PHP
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
php 猴子摘桃的算法
2017/06/20 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
js DOM模型操作
2009/12/28 Javascript
在模板页面的js使用办法
2010/04/01 Javascript
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
Python自定义简单图轴简单实例
2018/01/08 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
退休感言
2014/01/28 职场文书
初一体育教学反思
2014/01/29 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
承诺书范文
2014/06/03 职场文书
员工培训协议书
2014/09/15 职场文书
校车司机安全责任书
2015/05/11 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL