分享一个我自己写的ToolTip提示插件(附源码)


Posted in Javascript onJanuary 20, 2013

继续分享一个我自己写的 ToolTip提示插件,希望大家支持我,给我点评论,哪怕骂我的也好啊,让我知道有人在关注我“小豆” 嘿嘿。废话不多说上代码!

$.fn.ToolTip = function (option) { 
var defaults = { 
direction: "down", 
star: function () { }, 
from: $(this), 
url: '../images/arrow.png' 
}; 
//方法内基础变量 
var opt = $.extend(defaults, option), 
dirarray = ['up', 'down', 'left', 'right'], 
left = 0, top = 0, _left = 0, _top = 0, arrow_w = 15, arrow_h = 60, timeout, arrow = '0 0'; 
//开始遍历 
$(this).each(function () { 
var obj = $(this); 
obj.on({ 
mouseenter: function () { 
GetPos(obj); 
var objtip = $("<div class='tooltip'></div>").css({ 
position: "absolute", 
top: top, 
left: left, 
border: "solid 1px #ccc", 
width: $("#" + obj.attr("data-tooltip")).outerWidth(true), 
height: $("#" + obj.attr("data-tooltip")).outerHeight(true), 
'border-radius': '8px 8px', 
'background-color': '#fff', 
'z-index': 999 
}).appendTo(obj); 
var objtiphead = $("<div></div>").css({ 
width: arrow_w == 30 ? objtip.outerWidth(true) : 15, 
height: arrow_h == 30 ? objtip.outerHeight(true) : 15, 
position: "absolute", 
top: _top, 
left: _left 
}).appendTo(objtip); 
var objtiparrow = $("<div></div>").css({ 
width: arrow_w, 
height: arrow_h, 
"background-image": "url(" + opt.url + ")", 
"background-repeat": "no-repeat", 
"background-position": arrow 
}).appendTo(objtiphead); 
objtip.append($("#" + obj.attr("data-tooltip")).clone().show()); 
objtip.on({ 
mouseenter: function () { 
obj.data({ 
attip: true 
}); 
}, mouseleave: function () { 
$(".tooltip").remove(); 
obj.removeData("attip"); 
} 
}); 
} 
, mouseleave: function () { 
if (!obj.data("attip")) 
$(".tooltip").remove(); 
obj.removeData("attip"); 
} 
}); 
}); 
//得出位置 
var GetPos = function (obj) { 
var objtip = $("#" + obj.attr("data-tooltip")); 
var tooltippos = { 
up: function () { 
arrow_w = 30; arrow_h = 15; 
top = obj.position().top - 12 - objtip.outerHeight(true); 
left = obj.position().left; 
_top = objtip.outerHeight(true); 
_left = 15; 
arrow = '-50px -50px'; 
}, 
down: function () { 
arrow_w = 30; arrow_h = 15; 
top = obj.position().top + 12 + obj.height(); 
left = obj.position().left; 
_top = -15; 
_left = 15; 
arrow = '-50px 0'; 
}, 
right: function () { 
arrow_w = 15; 
arrow_h = 30; 
top = obj.position().top; 
left = obj.position().left - 12 - objtip.outerWidth(true); 
_top = 15; 
_left = objtip.outerWidth(true); 
arrow = '-80px -20px'; 
}, 
left: function () { 
arrow_w = 15; 
arrow_h = 30; 
top = obj.position().top; 
left = obj.position().left + obj.width() + 12; 
_top = 15; 
_left = -15; 
arrow = '0 -20px'; 
} 
}; 
opt.star(); 
opt.direction = $.inArray(opt.direction, dirarray) != -1 ? opt.direction : "down"; 
switch (opt.direction) { 
case "up": 
if (obj[0].getBoundingClientRect().top - 10 - objtip.outerHeight() > 0) 
tooltippos.up(); 
else 
tooltippos.down(); 
break; 
case "down": 
if (obj[0].getBoundingClientRect().top + 10 + obj.height() + objtip.outerHeight() < $(window).height()) 
tooltippos.down(); 
else 
tooltippos.up(); 
break; 
case "right": 
if (obj[0].getBoundingClientRect().left - 10 - objtip.outerWidth() > 0) 
tooltippos.right(); 
else 
tooltippos.left(); 
break; 
case "left": 
if (obj[0].getBoundingClientRect().left + obj.width() + 10 + objtip.outerWidth() < $(window).width()) 
tooltippos.left(); 
else 
tooltippos.right(); 
} 
} 
}

经测试,好像IE7 箭头有指向错误,大家可以修改下。小问题啦,洒洒水啦~
效果图
分享一个我自己写的ToolTip提示插件(附源码) 
当然,里面是什么内容,那就要自己创造了,我只是写了一个展示div,用法很简单的。
源码下载
操作说明是对用户体验师的侮辱!
Javascript 相关文章推荐
js loading加载效果实现代码
Nov 24 Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
JS 跳转页面延迟2种方法
Mar 29 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
JavaScript利用正则表达式去除日期中的“-”
Jul 01 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 Javascript
使用jQuery.fn自定义jQuery翻页插件
Jan 20 #Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 #Javascript
js+数组实现网页上显示时间/星期几的实用方法
Jan 18 #Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 #Javascript
js replace正则表达式应用案例讲解
Jan 17 #Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 #Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 #Javascript
You might like
自己做矿石收音机
2021/03/02 无线电
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
php取出数组单个值的方法
2018/03/12 PHP
javascript FormatNumber函数实现方法
2008/12/30 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
学校安全教育制度
2014/01/31 职场文书
新员工入职感言
2014/02/01 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
教师读书活动心得体会
2016/01/14 职场文书