分享一个我自己写的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 相关文章推荐
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
使用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
php数据类型判断函数有哪些
2013/09/23 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
Python返回数组/List长度的实例
2018/06/23 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
django实现支付宝支付实例讲解
2019/10/17 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
python离线安装外部依赖包的实现
2020/02/13 Python
is_file和file_exists效率比较
2021/03/14 PHP
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
Yahoo-PHP面试题1
2016/07/20 面试题
合伙协议书范本
2014/04/21 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
小学生成绩单评语
2014/12/31 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
对公司的意见和建议
2015/06/04 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
python爬虫之selenium库的安装及使用教程
2021/05/23 Python
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL