jquery的Tooltip插件 qtip使用详细说明_jquery
程序员文章站
2022-04-25 20:49:56
...
例如:
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如下所示:
JS代码:
Js代码
效果如图所示:
7、Modal tooltips
html如下所示:
JS代码:
效果如图所示:
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如下所示:
复制代码 代码如下:
JS代码:
复制代码 代码如下:
Js代码
效果如图所示:
7、Modal tooltips
html如下所示:
复制代码 代码如下:
JS代码:
复制代码 代码如下:
效果如图所示:
推荐阅读
-
jQuery.Validate表单验证插件的使用示例详解
-
jQuery zTree树插件的使用教程
-
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
-
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
-
Jquery上传插件 uploadify v3.1使用说明
-
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
-
jquery滚动条插件jScrollPane的使用介绍
-
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
-
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
-
qTip2 精致的基于jQuery提示信息插件