文档章节

jQuery Tips

lgscofield
 lgscofield
发布于 2015/06/26 13:59
字数 823
阅读 32
收藏 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.

lgscofield

lgscofield

粉丝 24
博文 141
码字总数 63275
作品 0
南京
架构师
私信 提问
加载中
请先登录后再评论。
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.6K
8
表单验证插件--Jquery表单验证插件

目前支持对以下格式的值进行验证: cnum-(纯数字), char-(纯字母), zwen-(中文), bysc-(字母开头), mail(邮箱), yzbm(邮政编码) 其中的‘’表示长度,比如“zwen1-5”表示中文1-5位的长度。同...

huanganiu
2013/01/23
4.4K
0
JS框架--Cyer

Cyer是一个轻量、小巧的js框架,精简易懂的API设计,支持链式调用,有点jQuery的味道。核心部分为选择器(selector)、dom操作、event机制。暂不支持animate功能。版本更新到v1.0.3,增加domRe...

黄昌运
2013/03/06
2.1K
0
jQuery仿亚马逊风格图片滚动插件--amazon_scroller.js

亚马逊是美国甚至是全世界最大的网络电子商务公司,它的网站也相对简单,不花哨。这款图片滚动效果正是模仿自亚马逊网站,自定义参数比较多,可以设置图片滚动间隔、是否显示标题、图片大小、...

dowebok
2013/04/04
2.2K
1
超快的css selector引擎--kquery 2.0

kquery是一款基于javascript完整实现css3选择器引擎. 兼容所有主流浏览器ie6+/chrome/firefox/opera/safari, 压缩和gzip之后仅8kb大小。智能编译引擎优化去除不必要的逻辑, 查询速度远胜于...

aaron.xiao
2012/10/23
708
0

没有更多内容

加载失败,请刷新页面

加载更多

汇总一下 Intellij IDEA 常用的牛逼插件!

来源:blog.csdn.net/sunny243788557/java/article/details/106011723 1、日晒主题 Solarized Themes 2、idea上 类调用时序图 SequenceDiagram for IntelliJ IDEA 3、彩色括号 Rainbow Brac......

路人甲Java
昨天
12
0
StringBuider 在什么条件下、如何使用效率更高?

点击上方“方志朋”,选择“设为星标” 回复”666“获取新整理的面试文章 作者:后青春期的Keats cnblogs.com/keatsCoder/p/13212289.html 引言 都说 StringBuilder 在处理字符串拼接上效率要...

方志朋
昨天
7
0
预告|悬镜子芽:新一代灰盒安全测试技术实践分享

点击蓝字 关注我们 万物皆有法,方能有序运行。网络安全进化到内生安全时代,以框架为起点,规划全景,技术内生外长,不断叠加,形成新一代网络安全之道。2020北京网络安全大会(BCS2020)已...

悬镜
昨天
0
0
zoom免费用户无法在中国登陆,RHUB免费续航zoom

中美关系日趋紧张,许多产品强制要求用户站队,zoom已经做了选择,抛弃众多信任、认可zoom产品的用户。微软选择坚持为中国用户提供服务,谁又说得来明天会如何?我们如此泱泱大国,竟要受制于...

osc_gt7nq50v
20分钟前
19
0
kubernetes 安装笔记

ssh -p 9000 root@127.0.0.1 192.168.56.101 master-node 192.168.56.102 work-node1 192.168.56.103 work-node2 由于kubeadm 默认从官网k8s.grc.io下载所需镜像,国内无法访问,因此需要通过......

solate
21分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部