基于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 相关文章推荐
Javascript 获取LI里的内容
Dec 17 Javascript
javascript里模拟sleep(两种实现方式)
Jan 25 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
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+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
javascript工厂方式定义对象
2014/12/26 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
python3.4实现邮件发送功能
2018/05/28 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
python中shell执行知识点
2020/05/06 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
分享一个python的aes加密代码
2020/12/22 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
清扬洗发水广告词
2014/03/14 职场文书
大学班级学风建设方案
2014/05/01 职场文书
工地安全质量标语
2014/06/07 职场文书
法制宣传口号
2014/06/16 职场文书
幼师求职信
2014/06/23 职场文书
管理标语大全
2014/06/24 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
通知函格式范文
2015/04/27 职场文书