qtip2:http://qtip2.com/

bower install qtip2 // lowercase!

引入一个css和插件即可。

<script type="text/javascript" src="/path/to/jquery.qtip.js"></script>

如果需要更多的支持,则引入相应的扩展。

qtip2下面后里面有个basic文件夹,里面的文件和外面文件名相同,但内容不同。

外面的js包含了插件Plugins: tips modal viewport svg imagemap ie6,。

而basic下面的没有包含插件。

样式:

/* Basic styles */
.qtip-light{} /* Light coloured style */
.qtip-dark{} /* Alternative dark style */
.qtip-cream{} /* Cream-esque style, similar to the default */
.qtip-red{} /* Alert-ful red style */
.qtip-green{} /* Positive green style */
.qtip-blue{} /* Informative blue style */ /* CSS3 styles */
.qtip-rounded{} /* CSS3 border-radius class for applying rounded corners to your tooltips */
.qtip-shadow{} /* CSS3 box-shadow class for applying shadows to your tooltips */
.qtip-bootstrap{} /* Twitter Bootstrap style */
.qtip-youtube{} /* Google's new YouTube style */
.qtip-tipsy{} /* Minimalist Tipsy style */
.qtip-tipped{} /* Tipped libraries "Blue" style */
.qtip-jtools{} /* jTools tooltip style */
.qtip-cluetip{} /* Good ole' ClueTip style */

http://qtip2.com/guides

使用方法:

JavaScript String

If you just want a common piece of text shared between all your tooltips, you can supply qTip2  directly with a JavaScript String

$('a').qtip({ // Grab some elements to apply the tooltip to
content: {
text: 'My common piece of text here'
}
})

(等同于:

$('.selector').qtip({ content: 'My content' });

)

title attribute

If you plan on using qTip2  as simply a very thin replacement of the browser tooltips, the title attribute is a great way to do so. It's standards compliant, it's the expected place for tooltip text, and the plugin will automaically look there for its content if none is given inside your .qtip({ ... }) config object!

$('[title]').qtip(); // Grab all elements with a title attribute, and apply qTip!
$('[title!=""]').qtip(); // A bit better. Grab elements with a title attribute that isn't blank.

This is the simplest method of using qTip2 , as it requires very little setup and works to replace existing, native tooltips auto-magically!

使用参考:

http://blog.csdn.net/smartsmile2012/article/details/17169443

jquery tooltip插件的更多相关文章

  1. jquery tooltip

    这是个加了点淡入淡出效果的顶部tooltip控件,会自动消失 用法: <head> <title></title> <link href="base ...

  2. 30个非常流行的提示信息插件(jQuery Tooltip Plugin)

    在网站的设计中,提示信息是非常细微的功能,但是起着非常重要的作用.如果你的网站中提示信息做的比较好,会给浏览者留下非常深刻的印象,同时也会起到非常好的网站宣传效果,下面介绍了30个比较流行提示信息插件 ...

  3. 在angular项目中使用bootstrap的tooltip插件时,报错Property 'tooltip' does no t exist on type 'JQuery<HTMLElement>的解决方法和过程

    在angular4的项目中需要使用bootstrap的tooltip插件. 1. 使用命令安装jQuery和bootstrap npm install bootstrap jquery --save ...

  4. BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

  5. 基于Bootstrap的炫酷jQuery slider插件

    简要教程 这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQuery slider插件.该slider插件可以自定义slider的颜色.形状.透明度和tooltip等属性,美 ...

  6. 雷林鹏分享:jQuery EasyUI 插件

    jQuery EasyUI 插件 jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合,包括功能强大的 datagrid(数据网格).treegrid(树形表格). panel(面板 ...

  7. 绝对震撼 10个实用的jQuery/HTML5插件

    在HTML5的世界里,我们见证了无数的特效奇迹,但很多特效我们很难在网页中应用,今天我们要分享10款效果震撼但是又比较实用的jQuery/HTML5插件,希望这些项目在应用的过程中也能给你带来设计灵感 ...

  8. [JQuery插件系列]-强烈推荐10个非常不错的jQuery工具提示插件

    个非常酷的 jQuery 工具提示(Tooltip)插件,希望大家能喜欢. 1. Pop! 使用 Pop!可以创建简单的下拉菜单!这是一个并不引人注目的 jQuery 插件. 2. BetterTip ...

  9. Bootstrap 提示工具(Tooltip)插件的事件

    事件 下表列出了提示工具(Tooltip)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.tooltip 当调用 show 实例方法时立即触发该事件. $('#m ...

随机推荐

  1. Excel相关操作

    public static bool DataSetToExcel(DataSet dataSet, string filePath, bool isShowExcle = true) { DataT ...

  2. weblogic启动项目,设置内容、设置的数据源链接不生效

    昨天坑自己了一把,把weblogic的数据库连接方式由jdbc改成了jndi,然后不生效,还是走之前jdbc的连接地址. 因为数据库用户之前权限有问题,所以一直纠结于这个地方,忘记了缓存的原因. 后来 ...

  3. 移位运算符:<<,>>,>>>总结

    位移总结篇:带demo讲解 https://www.cnblogs.com/yyangblog/archive/2011/01/14/1935656.html

  4. 洛谷试炼场-简单数学问题-P1403 [AHOI2005]-因数

    洛谷试炼场-简单数学问题 P1403 [AHOI2005]约数研究 Description 科学家们在Samuel星球上的探险得到了丰富的能源储备,这使得空间站中大型计算机"Samuel I ...

  5. java基础解析系列(二)---Integer

    java基础解析系列(二)---Integer 前言:本系列的主题是平时容易疏忽的知识点,只有基础扎实,在编码的时候才能更注重规范和性能,在出现bug的时候,才能处理更加从容. 目录 java基础解析 ...

  6. gateone安装使用

    下载地址 https://github.com/liftoff/GateOne unzip GateOne-master.zip cd GateOne-master/ python setup.py ...

  7. en-zh(社会问题)social problems

    The world's richest man, Amazon founder Jeff Bezos, and his wife MacKenzie have agreed a record-brea ...

  8. CSS盒子模型(简要了解)

    CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 外边距(marg ...

  9. [troubleshoot][archliunx][chromium][flash] chrome提示flash不是最新

    最近chrome总是在提示flash不是最新要求更新. 原来以前用的flash包 chromium-pepper-flash 不见了,改名变成了pepper-flash. /home/tong [to ...

  10. 状压dp的另一种形式

    做的那么多都是一些比较怎么说呢,都是在数网格一类的题目之中,这些题目有些有点固定的套路,而一些需要状态压缩的题目呢,则么是真正对状态转移的考验. 这道题呢,被彻底打脸了,以后一定要任性一点一道题做不出 ...