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

继续分享一个我自己写的 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 箭头有指向错误，大家可以修改下。小问题啦，洒洒水啦~
效果图：
 
当然，里面是什么内容，那就要自己创造了，我只是写了一个展示div，用法很简单的。
源码下载
操作说明是对用户体验师的侮辱！

赞 (0)

相关推荐

  • 推荐17个优美新鲜的jQuery的工具提示插件

    推荐17个优美新鲜的jQuery的工具提示插件

    在web开发当中,工具提示条对于完善web网站的用户体验至关重要.title属性通常是用来帮助用户了解显示链接的信息.默认情况下用于一个访客来说真是不好找,因为鼠标放上去他才可能显示.如果做一个像电子商务网站的注册页面,页面包含这么多的信息,如何让用户可以把鼠标悬停链接他自动弹出醒目的信息.这个使用jquery强大的工具提示插件在这种情况下是可以的完美实现的.你需要做的就是添加title属性指定的类名.在这篇文章中,我收集了17个和新鲜的jQuery的工具提示插件,他们都是轻量级的工具提示插件,

  • 基于jQuery的消息提示插件 DivAlert之旅（二）

    基于jQuery的消息提示插件 DivAlert之旅（二）

    改进的代码部分主要如下: 1.创建default.css文件: 代码 复制代码 代码如下: img { vertical-align:middle; } .jBg { position: absolute; top: 0; left: 0; z-index: 9999; background-color: #999; filter: alpha(opacity=70); opacity: 0.7; } .jWrap { position: absolute; border: 1px solid

  • 基于jQuery的消息提示插件之旅 DivAlert(三)

    本版本遵循了2.0的写法,此处通过extend方法封装了需要设置的各个选项,比起2.0版本的代码要精简了一些. 2.0版本 复制代码 代码如下: //设置插件基本信息 var options = o || {}; options.width = o.width || 300; //提示框宽度若小于104px则自动重置为200px if (options.height > 104) { options.height = o.height; } else { options.height = 200

  • 20款非常优秀的 jQuery 工具提示插件 推荐

    20款非常优秀的 jQuery 工具提示插件 推荐

    因此,今天这篇文章向大家推荐的20款优秀的 jQuery Tooltip 插件就是用于帮助你制作漂亮的工具提示效果. 1. Dynamic tooltip 2. jGrowl 3. jQuery Horizontal Tooltips Menu Tutorials 4. Coda Popup Bubble 5. The Tooltip 6. TipTip 7. (mb)Tooltip 8. vTip 9. Awesomeness 10. jQuery Ajax Tooltip 11. Digg-

  • niceTitle 基于jquery的超链接提示插件

    niceTitle 基于jquery的超链接提示插件

    这不是真正的预览,在读取文字列表的时候同时读取每个文章的内容概要(即想要预览的内容),然后使用该插件就可以实现假预览. 效果图如下,自己可以相应修改 代码如下: 复制代码 代码如下: <link rel="Stylesheet" type="text/css" href="Styles/jQuery.niceTitle.css" /> <script type="text/javascript" src=&q

  • JQuery实现简单时尚快捷的气泡提示插件

    JQuery实现简单时尚快捷的气泡提示插件

    在程序提交后,我们需要验证并提示出错的位置,利用JQuery我们可以轻松实现气泡提示,先看效果图: 具体调用代码: 复制代码 代码如下: <input name="ipt" id="ipt" value=""/> <script language="javascript"> Tooltip.show('输入值为空!','ipt'); </script> 其实现过程如下: 1.首先我们在Pho

  • 自制基于jQuery的智能提示插件一枚

    自制基于jQuery的智能提示插件一枚

    目前实现如下功能: 1 最基本需求,根据当前文本框字符取出适配数据  1.1 支持同一页面多个元素调用本插件  1.2 必需的参数是url  1.3 对于连续不断地输入,会把之前的ajax请求全部取消,避免造成服务器无谓的压力(图4)  1.4 最基本调用$("myel").autoCmpt({url:"url"});2 空关键词查询开关(emptyRequest),打开则鼠标点在输入框内即出现提示(当下拉列表用),默认为true(图1)3 支持关联查询,即当前文本

  • jquery.cvtooltip.js 基于jquery的气泡提示插件

    序 1.插件名cvtooltip中的cv是ChinaValue的首字母缩写,而tooltip就是提示啦. 2.适用于新功能的提示,引导用户的提示,即时类消息的提示,操作失败提示(操作成功了也没人拦着)等等等,使用css实现,不附带任何图片文件. 3.目前发现的问题,在Chorme中表现的不给力,是由于Chrome对页面的解析与IE和FF不同,导致jquery的position或者offset返回值不同. 4.该插件依然是练习之作,一人之力,错误难免. 实例演示 1.载入页面的同时,气泡提示也显示

  • 推荐10个超棒的jQuery工具提示插件

    推荐10个超棒的jQuery工具提示插件

    1. Pop! 使用 Pop!可以创建简单的下拉菜单!这是一个并不引人注目的 jQuery 插件. 2. BetterTip 允许你创建定制的 Tool tips 的 jQuery 插件. 3. EZPZ Tooltip 非常简单的使用边框的 tooltip,同样也可以跟随鼠标. 4. BsTip 各种简单的 tooltips,使用淡入和淡出效果,并且也有边框环绕. 5. clueTip 当鼠标悬浮的时候允许显示一个漂亮的 tooltip 在指定的元素上. 6. inline HTML tool

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

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

    继续分享一个我自己写的 ToolTip提示插件,希望大家支持我,给我点评论,哪怕骂我的也好啊,让我知道有人在关注我"小豆" 嘿嘿.废话不多说上代码! 复制代码 代码如下: $.fn.ToolTip = function (option) { var defaults = { direction: "down", star: function () { }, from: $(this), url: '../images/arrow.png' }; //方法内基础变量

  • 分享一个自己动手写的jQuery分页插件

    工作需要一个JS分页插件,心想自己动手写一个吧,一来上网找一个不清楚代码结构的,出了问题难以解决,而且网上的插件所包含的功能太多,有些根本用不到,就没必要加载那段JS,二来想起没写过jQuery插件,就当练一下手了,好了,先看结果: http://demo.jb51.net/js/2014/EasyPage/ 简单说一下这个插件所要实现的功能 后台将查询出来的内容全部显示到页面上,这个插件要控制这些内容,使其一页一页显示.有上一页,下一页,首页,尾页的功能.在第一页时,上一页,首页要隐藏.在最后

  • Python写一个简单上课点名系统（附源码）

    Python写一个简单上课点名系统（附源码）

    目录 一．准备工作 1.Tkinter 2.PIL 二．预览 1.启动 2.开始点名-顺序点名 3.开始点名-随机点名 4.手动加载人名单 5.开始点名-顺序点名-Pyqt5版本 三．思路 1.整体实现思路 2.点名实现思路 四．源代码 五．总结 一．准备工作 1.Tkinter Tkinter 是 python 内置的 TK GUI 工具集.TK 是 Tcl 语言的原生 GUI 库.作为 python 的图形设计工具,它所使用的 Tcl 语言环境已经完全嵌入到了 python 解释器中. 我们

  • 我用Python给班主任写了一个自动阅卷脚本(附源码)

    我用Python给班主任写了一个自动阅卷脚本(附源码)

    导语 幼儿园升小学,小学升中学,中学升高中.......... 每个人都要经历的九年义务教育:伴随的都是作业.随堂考.以及每个科目的大大小小的考试.当然小编被考试支配的恐惧以及过去了哈~除了学生考试的压力之外. 有调查发现,目前老师大量的时间被小型考试,如课堂测验.周测等高频次测验的批改客观题.计分.登分等占用,被迫压缩了备课.精准辅导的时间. 今天小编带大家做一款解放教师的自动阅卷系统. 几千张的答题卡扫描录入电脑阅卷系统,老师们只需打开电脑登陆,即可找到自己要批改的那道题. 大大提高了改卷效

  • 用React-Native+Mobx做一个迷你水果商城APP(附源码)

    用React-Native+Mobx做一个迷你水果商城APP(附源码)

    前言 最近一直在学习微信小程序,在学习过程中,看到了 wxapp-mall 这个微信小程序的项目,觉得很不错,UI挺小清新的,便clone下来研究研究,在看源码过程中,发现并不复杂,用不多的代码来实现丰富的功能确实令我十分惊喜,于是,我就想,如果用react-native来做一个类似这种小项目难不难呢,何况,写一套代码还能同时跑android和ios(小程序也是...),要不写一个来玩玩?有了这个想法,我便直接 react-native init 一个project来写一下吧(๑•̀ㅂ•́)و✧

  • Python编写一个验证码图片数据标注GUI程序附源码

    做验证码图片的识别,不论是使用传统的ORC技术,还是使用统计机器学习或者是使用深度学习神经网络,都少不了从网络上采集大量相关的验证码图片做数据集样本来进行训练. 采集验证码图片,可以直接使用Python进行批量下载,下载完之后,就需要对下载下来的验证码图片进行标注.一般情况下,一个验证码图片的文件名就是图片中验证码的实际字符串. 在不借助工具的情况下,我们对验证码图片进行上述标注的流程是: 1.打开图片所在的文件夹: 2.选择一个图片: 3.鼠标右键重命名: 4.输入正确的字符串: 5.保存 州

  • Android 中 SwipeLayout一个展示条目底层菜单的侧滑控件源码解析

    Android 中 SwipeLayout一个展示条目底层菜单的侧滑控件源码解析

    由于项目上的需要侧滑条目展示收藏按钮,记得之前代码家有写过一个厉害的开源控件 AndroidSwipeLayout 本来准备直接拿来使用,但是看过 issue 发现现在有不少使用者反应有不少的 bug ,而且代码家现在貌似也不进行维护了.故自己实现了一个所要效果的一个控件.因为只是实现我需要的效果,所以大家也能看到,代码里有不少地方我是写死的.希望对大家有些帮助.而且暂时也不需要 AndroidSwipeLayout 大而全的功能,算是变相给自己做的项目精简代码了. 完整示例代码请看:GitHu

  • jQuery复制表单元素附源码分享效果演示

    jQuery复制表单元素附源码分享效果演示

    我们在提交表单时,有时会遇到需要重复添加多个相同表单元素,如订单信息中需要添加多个不同型号的产品.表单数据中新增字段信息等.这个时候我们可以在表单中直接放置一个"新增一项"或"复制"按钮,通过点击按钮即可实现复制表单元素. 查看演示 下载源码 HTML 本文我们通过实例介绍一款简单的基于jQuery的元素复制插件,通过调用该插件轻松实现元素复制功能. 首先载入jQuery库文件和元素复制插件duplicateElement.min.js. <script sr

  • 6款经典实用的jQuery小插件及源码(对话框/提示工具等等)

    6款经典实用的jQuery小插件及源码(对话框/提示工具等等)

    jQuery是一款当之无愧的JS开源框架,凭借其小巧实用占领了很大的开发市场,jQuery另外一个优势就是拥有丰富多彩的插件,这些插件可以帮助你简化很多的开发过程.下面介绍的6款实用jQuery小插件及源码,希望大家喜欢. 1.jQuery智能单词提示工具 这是一款可以根据当前输入智能提示单词的插件,效果很棒. 在线演示 /源码下载 2.CSS3实现的Photoshop按钮效果 这是用jQuery和CSS3实现的Photoshop按钮效果. 在线演示 /源码下载 3.jQuery自定义确认对话框

  • Android实现一个比相册更高大上的左右滑动特效（附源码）

    Android实现一个比相册更高大上的左右滑动特效（附源码）

    目录 实现思路 源码如下: 在Android里面,想要实现一个类似相册的左右滑动效果,我们除了可以用Gallery.HorizontalScrollView.ViewPager等控件,还可以用一个叫做 ViewFlipper 的类来代替实现,它继承于 ViewAnimator.如见其名,这个类是跟动画有关,会将添加到它里面的两个或者多个View做一个动画,然后每次只显示一个子View,通过在 View 之间切换时执行动画,最终达到一个类似相册能左右滑动的效果. 本次功能要实现的两个基本效果 最基

随机推荐