栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

jquery的Tooltip插件 qtip使用详细说明

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

jquery的Tooltip插件 qtip使用详细说明

例如:
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如下所示:
复制代码 代码如下:

Click me


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


效果如图所示:

7、Modal tooltips
html如下所示:
复制代码 代码如下:

Click here


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


效果如图所示:
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/115386.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号