jquery的Tooltip插件 qtip使用详细说明_jquery
程序员文章站
2022-05-11 17:59:01
...
例如:
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代码:
复制代码 代码如下:
效果如图所示:
上一篇: PL/SQL delete误删除如何恢复
下一篇: csapp学习笔记(变量在内存中的位置)
推荐阅读
-
Jquery上传插件 uploadify v3.1使用说明
-
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
-
jquery滚动条插件jScrollPane的使用介绍
-
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
-
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
-
qTip2 精致的基于jQuery提示信息插件
-
Chosen 基于jquery的选择框插件使用方法
-
详解jQuery uploadify文件上传插件的使用方法
-
jquery插件lazyload.js延迟加载图片的使用方法
-
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析