基于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 相关文章推荐
网页自动跳转代码收集
Sep 27 Javascript
jquery 插件学习(四)
Aug 06 Javascript
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 Javascript
swiper自定义分页器的样式
Sep 14 Javascript
JS 基本概念详细介绍
Oct 16 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中的curl使用入门教程和常见用法实例
2014/04/10 PHP
js控制框架刷新
2008/08/01 Javascript
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Python中Threading用法详解
2017/12/27 Python
python代码过长的换行方法
2018/07/19 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
python安装gdal的两种方法
2019/10/29 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
教职工代表大会主持词
2014/04/01 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python