Heim >Web-Frontend >js-Tutorial >qTip 基于JQuery的Tooltip插件[兼容性好]_jquery

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

WBOY
WBOYOriginal
2016-05-16 18:20:401105Durchsuche
qTip 基于JQuery的Tooltip插件[兼容性好]_jquery
主页: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如下所示:
复制代码 代码如下:

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



2、Title attribute

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

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



3、Image

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

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



4、Corner values

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

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



5、Fixed tooltips

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





JS代码:

复制代码 代码如下:



css代码:

复制代码 代码如下:



6、Loading html

html如下所示:

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

JS代码:

复制代码 代码如下:



7、Modal tooltips

html如下所示:

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

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


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn