qTip 基于JQuery的Tooltip插件[兼容性好]

主页:http://craigsworks.com/projects/qtip/

下载:http://craigsworks.com/projects/qtip/download

示例:http://craigsworks.com/projects/qtip/

qTip是一个基于JQuery的Tooltip插件。它几乎支持所有的主流浏览器
例如：

Internet Explorer 6.0+
Firefox 2.0+
Opera 9.0+
Safari 3.0+
Google Chrome 1.0+
Konqueror 3.5+

使用qTip可以很轻松的定义tip的位置以及样式，同时qTip还有一个强大的API......

使用qTip前，只需引入两个JS文件即可：

复制代码 代码如下:



下面举几个比较简单的例子。

1、Basic text

html如下所示：
复制代码 代码如下:

Basic text


JS代码：
复制代码 代码如下:


2、Title attribute

html如下所示：
复制代码 代码如下:

Title attribute


JS代码：
复制代码 代码如下:


3、Image

html如下所示：
复制代码 代码如下:

Image


JS代码：
复制代码 代码如下:


4、Corner values

html如下所示：
复制代码 代码如下:

Corner values


JS代码：
复制代码 代码如下:


5、Fixed tooltips

html如下所示：
复制代码 代码如下:




JS代码：

复制代码 代码如下:


css代码：

复制代码 代码如下:

#content img{
float: left;
margin-right: 35px;
border: 2px solid #454545;
padding: 1px;
}


6、Loading html

html如下所示：

Html代码
复制代码 代码如下:

Click me


JS代码：

复制代码 代码如下:


7、Modal tooltips

html如下所示：

Html代码
复制代码 代码如下:

Click here



JS代码：
复制代码 代码如下: