文档章节

jQuery Tips

lgscofield
 lgscofield
发布于 2015/06/26 13:59
字数 823
阅读 21
收藏 0

How It Works

TipTip uses the title attribute just like the native browser tooltip does. However, thetitle will be copied and then removed from the element when using TipTip so that the browser tooltip will not show up.

TipTip only generates one set of popup elements total, rather then generating one set of popup elements for each element with TipTip applied to it. This helps speed things up and reduces processing time. The elements generated are all div elements and are appended to the end of the body element. The structure looks like this:

<div id="tiptip_holder">
<div id="tiptip_content">
<div id="tiptip_arrow">
<div id="tiptip_arrow_inner"></div>
</div>
</div>
</div>

There are specific CSS class names added to the "tiptip_holder" div element when it appears depending on the orientation it appears in. Here is a list of the class names along with it's orientation:

  • tip_top - When the tooltip appears above the element.
  • tip_bottom - When the tooltip appears below the element.
  • tip_left - When the tooltip appears to the left the element.
  • tip_right - When the tooltip appears to the right the element.
  • tip_left_top - When the tooltip appears to the left and above the element.
  • tip_left_bottom - When the tooltip appears to the left and below the element.
  • tip_right_top - When the tooltip appears to the right and above the element.
  • tip_right_bottom - When the tooltip appears to the right and below the element.

TipTip has been tested (and works) in: IE7 & IE8, Firefox, Safari, Opera, and Chrome.

How To Use It

Obviously you need to make sure you have the latest jQuery library already loaded in your page. After that it's really simple, just add the following code to your page:

$(function(){
$(".someClass").tipTip();
});

Below is an example of using TipTip with some options:

$(function(){
$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
});

Below is an example of what your HTML would look like:

<p>
Cras sed ante. Phasellus in massa. <a href="" class="someClass" title="This will show up in the TipTip popup.">Curabitur dolor eros</a>, gravida et, hendrerit ac, cursus non, massa.
<span id="foo">
<img src="image.jpg" class="someClass" title="A picture of the World" />
</span>
</p>

Options

  • activationstring ("hover" by default) - jQuery method TipTip is activated with. Can be set to: "hover", "focus" or "click".
  • keepAlivetrue of false (false by default) - When set to true the TipTip will only fadeout when you hover over the actual TipTip and then hover off of it.
  • maxWidthstring ("200px" by default) - CSS max-width property for the TipTip element. This is a string so you can apply a percentage rule or 'auto'.
  • edgeOffsetnumber (3 by default) - Distances the TipTip popup from the element with TipTip applied to it by the number of pixels specified.
  • defaultPositionstring ("bottom" by default) - Default orientation TipTip should show up as. You can set it to: "top", "bottom", "left" or "right".
  • delaynumber (400 by default) - Number of milliseconds to delay before showing the TipTip popup after you mouseover an element with TipTip applied to it.
  • fadeInnumber (200 by default) - Speed at which the TipTip popup will fade into view.
  • fadeOutnumber (200 by default) - Speed at which the TipTip popup will fade out of view.
  • attributestring ("title" by default) - HTML attribute that TipTip should pull it's content from.
  • contentstring (false by default) - HTML or String to use as the content for TipTip. Will overwrite content from any HTML attribute.
  • entercallback function - Custom function that is run each time you mouseoveran element with TipTip applied to it.
  • exitcallback function - Custom function that is run each time you mouseout of an element with TipTip applied to it.

ChangeLog

Version 1.3 (Mar. 23, 2010)
  • Added defaultPoistion option that enables you to set the default orientation TipTip should show up as.
  • Added attribute option that enables you to set the HTML attribute that TipTip should pull it's content from.
  • Added content option. This will be used as the content for the TipTip and will overwrite any content pulled form any HTML attribute.
  • Added activation option enables you to specify the jQuery method TipTip is activated with: hover, focus or click. Now you can use TipTip on forms and for validation!
  • Added keepAlive option that when set to true the TipTip will only fadeout when you hover over the actual TipTip and then hover off of it. Allowing for hyperlinks inside your TipTip content to be accessible.
Version 1.2 (Jan. 13, 2010)
  • Added HTML support with Tip Tip. You can now add HTML into the Title attribute (though this is not recommended if you want strictly valid code).
  • Tightened up spacing margins in JS.
  • Updated margins in CSS file.
Version 1.1 (Jan. 03, 2010)
  • Swapped dynamically added orientation CSS class names ('_left' & '_right') to make better sense.
  • Added in some tighter spacing for the tooltip in JS.
Version 1.0 (Jan. 02, 2010)
  • Initial release.

License

This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses.

本文转载自:http://lgscofield.iteye.com/blog/1679473

共有 人打赏支持
lgscofield

lgscofield

粉丝 21
博文 140
码字总数 63036
作品 0
南京
架构师
GBin1插件分享:10个超棒tooltip的jQuery插件

日期:2011/10/09 来源:jQuery4u 翻译:GBin1.com 今天我们收集了10个非常酷的jQuery Tooltip插件,希望大家能喜欢。 1. Pop! 使用Pop!创建简单的下拉菜单!一个并不引人注目的jQuery插件...

gbin1
2011/10/10
0
0
了解jQuery技巧来提高你的代码

1.测试并提升你的jQuery选择器水平 这个jQuery选择器实验室非常酷,它能在线免费使用,当然你也能下来到本地离线使用。这个测试页面包含复杂的HTML组合字段,然后你能尝试预定义使用各种jQu...

i33
2012/09/25
0
0
Visual Studio下使用jQuery的10个技巧

【51CTO经典译文】广泛流行的jQuery是一个开源的,跨浏览器和兼容CSS 3的JavaScript库,你可以用它简化你的JavaScript编码任务和操作(添加,编辑和删除)HTML内容中的DOM元素,本文介绍10个...

晨曦之光
2012/03/09
0
0
很不错的jQuery学习资料和实例

很不错的jQuery学习资料和实例,分享给大家。 这些都是学习Jquery很不错的资料,整理了一下,分享给大家。 希望能对大家的学习有帮助。 帕兰 Noupe带来的51个最佳jQuery教程和实例 , 向大家介...

晨曦之光
2012/03/09
0
0
jQuery基础与JavaScript与CSS交互-第五章

目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器 掌握过滤选择器 掌握表单选择器 RIA技术 常见的RIA技术 Ajax Sliverlight Flex 什么是框架? 框架是程序员将一个又...

达叔小生
08/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

负载均衡的解决方案有哪些

负载均衡器服务可满足大型组织的需求,支持所有数据中心和跨数据中心高可靠性场景。 本地负载均衡,通过附带或者未附带持久性覆盖选项,Incapsula支持各种负载均衡算法,以优化服务器之间的流...

上树的熊
42分钟前
4
0
Java实现在线打开word文档加盖印章/盖章/签名功能

前言: 我们知道,大型一点的OA办公系统都会有很多在线处理office办公文档的需求。其中有一点也基本绕不开,那就是为文档盖章或添加手写签名来保护文档,让被盖章的文档不再被编辑。 在Java中...

山里的红杏
50分钟前
5
0
js控制输入正负数,小数点后保留两位

//限制数字function clearNoNum(obj){ //修复第一个字符是小数点 的情况. if(obj.value !=''&& obj.value.substr(0,1) == '.'){ obj.value=""; } obj.value ...

一直在成长的程序猿
53分钟前
2
0
动态代理

具体场景 为了使代理类与被代理类对第三方有相同的函数,代理类与被代理类一般实现一个公共的interface,定义如下 public interface Subject { void rent(); void hello(String s)...

wuyiyi
56分钟前
2
0
时间字段

我们看看这几个数据库中(mysql、oracle和sqlserver)如何表示时间 mysql数据库:它们分别是 date、datetime、time、timestamp和year。date :“yyyy-mm-dd”格式表示的日期值 time :“hh:...

DemonsI
58分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部