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. day9 九、函数

    一.函数 1.函数:可以完成特定功能的代码块,函数就是存放代码块的容器 2.定义函数的语法: 函数四部分:(函数执行的本质:执行函数体,得到函数返回值) ①函数名 ②函数体 ③返回值 ④参数 用def ...

  2. Int32 最大的数值是多少???(附十进制十六进制相互转换且包含正负数的java代码)

    正数转二进制很简单,转十六进制也很简单. 那么负数的情况下呢?在计算机中无法识别你给的符号“+”,"-",计算机只认识0和1 那么在二进制中如何表示负数. 先简单介绍一下负数如何转 ...

  3. TOP100summit2017:豆瓣耿新跃---站在公司整体目标下看技术管理

    壹佰案例:耿新跃老师您好,很荣幸又一次邀请到您担任壹佰案例大会的联席主席,在去年的壹佰案例大会上,您给我们带来很多非常经典的案例点评和提炼.您在去年壹佰案例峰会上最大的感触是什么呢? 耿新跃:我个人最 ...

  4. php实现简单消息发送+极光推送系统

    前几天刚写完的一个东西,写的比较简单,没有使用其他插件,原生php+计划任务实现 极光推送的代码 /* $receiver="registration_id" : [ " ...

  5. [No000013F]WPF学习之X名称空间详解

    X名称空间里面的成员(如X:Name,X:Class)都是写给XAML编译器看的.用来引导XAML代码将XAML代码编译为CLR代码. 4.1X名称空间里面到底都有些什么? x名称空间映射的是:htt ...

  6. hdu6363 bookshelf 容斥+数列+数论gcd定理(也可以Möbius)

    #define _CRT_SECURE_NO_WARNINGS #include<cmath> #include<iostream> #include<stdio.h&g ...

  7. Srt字幕文件解析

    // // ViewController.m // 字幕解析 // // Created by admin on 2018/8/30. // Copyright © 2018年 admin. All ...

  8. 转:java内部类作用

    原文地址:https://www.cnblogs.com/uu5666/p/8185061.html 一. 定义 放在一个类的内部的类我们就叫内部类. 二. 作用 1.内部类可以很好的实现隐藏, 一般 ...

  9. LeetCode 821 Shortest Distance to a Character 解题报告

    题目要求 Given a string S and a character C, return an array of integers representing the shortest dista ...

  10. 对称加密----AES和DES加密、解密

    目前主流的加密方式有:(对称加密)AES.DES        (非对称加密)RSA.DSA 调用AES/DES加密算法包最精要的就是下面两句话: Cipher cipher = Cipher.get ...