文档章节

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

粉丝 23
博文 140
码字总数 63036
作品 0
南京
架构师
私信 提问
26 个 jQuery使用技巧

The use of the jQuery library is growing and growing(just released jQuery 1.4), more and more people are using this useful javascript library. This means that more and more usef......

长平狐
2013/01/06
53
0
27 个 jQuery 的工具提示 Tooltip 插件

至少你能找到一款自己满意的吧?如果没有,只能说明你太挑剔 HoverEx – jQuery image hover animation plugin qTip – The jQuery tooltip Lite Tooltip Bundle Hotspot Map – Powerful a...

oschina
2013/07/29
6.1K
15
超过 30 个有用的 CSS、jQuery插件和代码技巧

Grid Navigation Effects with jQuery The 30 CSS Selectors you Must Memorize Beautiful Slide Out Navigation: A CSS and jQuery Tutorial Fixed Fade Out Menu: A CSS and jQuery Tutori......

小编辑
2011/08/23
3.9K
4
35 个高级但使用简单的 jQuery 插件

Subway Map Visualization jQuery Plugin Download | Demo jquery-toastmessage-plugin Download | Demo Gmap Google Maps Plugin for jQuery Download | Demo Recurly.js Download | Demo 9......

红薯
2012/02/02
5.9K
9
GBin1插件分享:10个超棒tooltip的jQuery插件

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

gbin1
2011/10/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

PHP生成CSV之内部换行

当我们使用PHP将采集到的文件内容保存到csv文件时,往往需要将采集内容进行二次过滤处理才能得到需要的内容。比如网页中的换行符,空格符等等。 对于空格等处理起来都比较简单,这里我们单独...

豆花饭烧土豆
53分钟前
1
0
使用 mjml 生成 thymeleaf 邮件框架模板

发邮件算是系统开发的一个基本需求了,不过搞邮件模板实在是件恶心事,估计搞过的同仁都有体会。 得支持多种客户端 支持响应式 疼彻心扉的 outlook 多数客户端只支持 inline 形式的 css 布局...

郁也风
56分钟前
4
0
让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字

让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字: 作者:孙冬梅;以前读韩国前总统朴槿惠的著作《绝望锻炼了我》时,里面有一句话令我印象深刻,她说“在我最困难的时期,...

原创小博客
今天
3
0
JAVA-四元数类

public class Quaternion { private final double x0, x1, x2, x3; // 四元数构造函数 public Quaternion(double x0, double x1, double x2, double x3) { this.x0 = ......

Pulsar-V
今天
17
0
Xshell利用Xftp传输文件,使用pure-ftpd搭建ftp服务

Xftp传输文件 如果已经通过Xshell登录到服务器,此时可以使用快捷键ctrl+alt+f 打开Xftp并展示Xshell当前的目录,之后直接拖拽传输文件即可。 pure-ftpd搭建ftp服务 pure-ftpd要比vsftp简单,...

野雪球
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部