分享一个我自己写的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 相关文章推荐
用JavaScript实现单继承和多继承的简单方法
Mar 29 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 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
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
php session劫持和防范的方法
2013/11/12 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
python抓取网页内容示例分享
2014/02/24 Python
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
甲方资料员岗位职责
2013/12/13 职场文书
人事主管岗位职责
2014/01/30 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
《社戏》教学反思
2014/04/15 职场文书
小学英语课后反思
2014/04/26 职场文书
白岩松演讲
2014/05/21 职场文书
学校三节实施方案
2014/06/09 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
自我管理的活动方案
2014/08/25 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
谢师宴学生致辞
2015/07/27 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
sql中mod()函数取余数的用法
2021/05/29 SQL Server
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python