qtip的相关知识

qTip Tooltip插件快速入门
最新推荐文章于 2025-06-13 15:10:18 发布
最新推荐文章于 2025-06-13 15:10:18 发布
阅读量1.3k 收藏 1
点赞数
文章标签： function border basic html button div

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文件即可：

Html代码 复制代码 收藏代码
  1. <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
  2. <script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script>  
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script>

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

1、Basic text

html如下所示：

Html代码 复制代码 收藏代码
  1. <div id="content"> 
  2.   <a href=" ">Basic text</a> 
  3. </div>  
<div id="content">
  <a href=" ">Basic text</a>
</div>

JS代码：

Js代码 复制代码 收藏代码
  1. <script type="text/javascript"> 
  2.   $(document).ready(function() 
  3.   { 
  4.     $('#content a[href]').qtip( 
  5.     { 
  6.       content: 'Some basic content for the tooltip' 
  7.     }); 
  8.   }); 
  9. </script> 

效果如图所示：

2、Title attribute

html如下所示：

Html代码 复制代码 收藏代码
  1. <div id="content"> 
  2.   <a href=" " title="That sounds familiar...">Title attribute</a> 
  3. </div>  
<div id="content">
  <a href=" " title="That sounds familiar...">Title attribute</a>
</div>

JS代码：

Js代码 复制代码 收藏代码
  1. <script type="text/javascript"> 
  2.   $(document).ready(function() 
  3.   { 
  4.     $('#content a[href][title]').qtip({ 
  5.       content: { 
  6.         text: false 
  7.       }, 
  8.       style: 'cream' 
  9.     }); 
  10.   }); 
  11. </script> 

效果如图所示：

3、Image

html如下所示：

Html代码 复制代码 收藏代码
  1. <div id="content"> 
  2.   <a href=" ">Image</a> 
  3. </div>  
<div id="content">
  <a href=" ">Image</a>
</div>

JS代码：

Js代码 复制代码 收藏代码
  1. <script type="text/javascript"> 
  2.   $(document).ready(function() 
  3.   { 
  4.     $('#content a[href]').qtip({ 
  5.       content: '<img src="small.png" alt="Image" />' 
  6.     }); 
  7.   }); 
  8. </script> 

效果如图所示：

4、Corner values

html如下所示：

Html代码 复制代码 收藏代码
  1. <div id="content" style="margin-top:200px;margin-left:200px;"> 
  2.   <a href=" ">Corner values</a> 
  3. </div>  
<div id="content" style="margin-top:200px;margin-left:200px;">
  <a href=" ">Corner values</a>
</div>

JS代码：

Js代码 复制代码 收藏代码
  1. <script type="text/javascript"> 
  2.  
  3.   var corners = 'bottomLeft'; 
  4.   var opposites = 'topRight'; 
  5.  
  6.   $(document).ready(function() 
  7.   { 
  8.     $('#content a') 
  9.     .hover(function() 
  10.     { 
  11.       $(this).html(opposites) 
  12.       .qtip({ 
  13.         content: corners, 
  14.         position: { 
  15.           corner: { 
  16.             tooltip: corners, 
  17.             target: opposites 
  18.           } 
  19.         }, 
  20.         show: { 
  21.           when: false, 
  22.           ready: true 
  23.         }, 
  24.         hide: false, 
  25.         style: { 
  26.           border: { 
  27.             width: 5, 
  28.             radius: 10 
  29.           }, 
  30.           padding: 10, 
  31.           textAlign: 'center', 
  32.           tip: true, 
  33.           name: 'cream' 
  34.         } 
  35.       }); 
  36.     }); 
  37.   }); 
  38. </script> 

效果如图所示：

5、Fixed tooltips

html如下所示：

Html代码 复制代码 收藏代码
  1. <div id="content"> 
  2.   <img src="sample.jpg" alt="" height="200" /> 
  3. </div>  
<div id="content">
  <img src="sample.jpg" alt="" height="200" />
</div>

JS代码：

Js代码 复制代码 收藏代码
  1. <script type="text/javascript"> 
  2.   $(document).ready(function() 
  3.   { 
  4.     $('#content img').each(function() 
  5.     { 
  6.       $(this).qtip( 
  7.       { 
  8.         content: '<a href=" ">Edit</a> | <a href=" ">Delete</a>', 
  9.         position: 'topRight', 
  10.         hide: { 
  11.           fixed: true 
  12.         }, 
  13.         style: { 
  14.           padding: '5px 15px', 
  15.           name: 'cream' 
  16.         } 
  17.       }); 
  18.     }); 
  19.   }); 
  20. </script> 

css代码：

Css代码 复制代码 收藏代码
  1. <style type="text/css"> 
  2.   #content img{ 
  3.     float: left; 
  4.     margin-right: 35px; 
  5.  
  6.     border: 2px solid #454545; 
  7.     padding: 1px; 
  8.   } 
  9. </style>  
<style type="text/css">
  #content img{
    float: left;
    margin-right: 35px;

    border: 2px solid #454545;
    padding: 1px;
  }
</style>

效果如图所示：

6、Loading html

html如下所示：

Html代码 复制代码 收藏代码
  1. <div id="content"> 
  2.   <a href="#" rel="sample.html">Click me</a> 
  3. </div>  
<div id="content">
  <a href="#" rel="sample.html">Click me</a>
</div>

JS代码：

Js代码 复制代码 收藏代码
  1. <script type="text/javascript"> 
  2.   $(document).ready(function() 
  3.   { 
  4.     $('#content a[rel]').each(function() 
  5.     { 
  6.       $(this).qtip( 
  7.       { 
  8.         content: { 
  9.           url: $(this).attr('rel'), 
  10.           title: { 
  11.             text: 'Wiki - ' + $(this).text(), 
  12.             button: 'Close' 
  13.           } 
  14.         }, 
  15.         position: { 
  16.           corner: { 
  17.             target: 'bottomMiddle', 
  18.             tooltip: 'topMiddle' 
  19.           }, 
  20.           adjust: { 
  21.             screen: true 
  22.           } 
  23.         }, 
  24.         show: { 
  25.           when: 'click', 
  26.           solo: true 
  27.         }, 
  28.         hide: 'unfocus', 
  29.         style: { 
  30.           tip: true, 
  31.           border: { 
  32.             width: 0, 
  33.             radius: 4 
  34.           }, 
  35.           name: 'light', 
  36.           width: 570 
  37.         } 
  38.       }) 
  39.     }); 
  40.   }); 
  41. </script> 

效果如图所示：

7、Modal tooltips

html如下所示：

Html代码 复制代码 收藏代码
  1. <div id="content"> 
  2.   <a href="#" rel="modal">Click here</a> 
  3. </div>  
<div id="content">
  <a href="#" rel="modal">Click here</a>
</div>

JS代码：

Js代码 复制代码 收藏代码
  1. <script type="text/javascript"> 
  2.   $(document).ready(function() 
  3.   { 
  4.     $('a[rel="modal"]:first').qtip( 
  5.     { 
  6.       content: { 
  7.         title: { 
  8.           text: 'Modal tooltips sample', 
  9.           button: 'Close' 
  10.         }, 
  11.         text: 'hello world' 
  12.       }, 
  13.       position: { 
  14.         target: $(document.body), 
  15.         corner: 'center' 
  16.       }, 
  17.       show: { 
  18.         when: 'click', 
  19.         solo: true 
  20.       }, 
  21.       hide: false, 
  22.       style: { 
  23.         width: { max: 350 }, 
  24.         padding: '14px', 
  25.         border: { 
  26.           width: 9, 
  27.           radius: 9, 
  28.           color: '#666666' 
  29.         }, 
  30.         name: 'light' 
  31.       }, 
  32.       api: { 
  33.         beforeShow: function() 
  34.         { 
  35.           $('#qtip-blanket').fadeIn(this.options.show.effect.length); 
  36.         }, 
  37.         beforeHide: function() 
  38.         { 
  39.           $('#qtip-blanket').fadeOut(this.options.hide.effect.length); 
  40.         } 
  41.       } 
  42.     }); 
  43.  
  44.     $('<div id="qtip-blanket">') 
  45.     .css({ 
  46.       position: 'absolute', 
  47.       top: $(document).scrollTop(), 
  48.       left: 0, 
  49.       height: $(document).height(), 
  50.       width: '100%', 
  51.  
  52.       opacity: 0.7, 
  53.       backgroundColor: 'black', 
  54.       zIndex: 5000 
  55.     }) 
  56.     .appendTo(document.body) 
  57.     .hide(); 
  58.   }); 
  59. </script> 

效果如图所示：

emily19900308
关注
jquery.tooltip.js
03-03
jquery插件，tooltip提示文字。
jquery tooltip
06-25
jquery好用的tooltip插件。 使用很简单。
掌握jQuery qTip：打造定制化网页提示框
最新发布
weixin_33072399的博客
06-13 841
随着前端技术的不断进步，用户界面的交互性越来越受到重视。在丰富的网页交互方式中，提示信息的展示是提升用户体验的关键之一。jQuery qTip作为一个轻量级、强大的提示信息展示工具，它能够让开发者以简单的方式为网页元素添加富有表现力的提示信息。qTip提供了一套预设配置，允许开发者快速实现定制化效果而无需从头开始编写代码。预设配置包括了对样式、位置、内容等多方面的设置。通过调用预设配置，可以轻松地对提示框进行主题化，或者实现特定的交互效果。使用预设配置的基本步骤如下：在初始化qTip时，将。
jQuery Tooltip
09-15
jQuery Tooltip Plugin Demo
qTip2 Position
编程资料大全
07-26 373
@author YHC 概述: qTip使用特殊的定位系统,使用角,在这些基础的概念的背后非常简单,当你去读的时候,你会觉得实际上它变成了简单的英语.如下例子,比如说,我们想定位qTip的my为left top(左上角) at在我们的目标元素的右下角(bottom right),非常简单,让我们来看看代码包含一下这些: $('.selector').qtip({ content: '...
Jquery qTip2实现多种提示效果,支持ajax,以及多种样式
diehe5608的博客
12-06 292
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
前端项目-qtip2.zip
10-05
【标题】"前端项目-qtip2.zip"是一个与前端开发相关的压缩包，其中包含的"qtip2"可能指的是QTip2，一个流行的JavaScript库，用于创建可自定义的工具提示和弹出框。QTip2是基于jQuery的，因此在深入探讨这个项目之前...
仿新浪微博jquery qtip ajax提示框
02-01
【标题】"仿新浪微博jquery qtip ajax提示框"所涉及的知识点主要集中在前端开发领域，具体包括以下几个方面： 1. **jQuery**：jQuery是一个高效、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和...
掌握jquery-qtip：便捷的JavaScript提示框插件
知识点一：jquery-qtip简介 jquery-qtip是一款基于jQuery的提示框插件，它允许开发者非常方便...以上就是对给定文件信息中的jquery-qtip的相关知识点的详细解释。希望这些知识点能帮助你更好地理解和使用jquery-qtip。
JQuery QTip前端气泡插件使用教程
- 接着下载并引入qTip插件的相关文件，包括JavaScript文件和CSS样式文件。 - 使用qTip提供的API来初始化和配置气泡提示，可以根据需要对不同的元素分别设置提示内容和样式。 - 针对不同的使用场景，例如信息提示...
js tooltip
11-19
javascript tooltip jquery tooltip demo js tooltip javascript tooltip demo
tooltip.rar
12-14
easyUI设计的信息提示ToolTips,其中包括了jquery,easyui等插件都包含在其中。
tooltip
03-20
新手们的好资料哦！支持
jquery.tip.js
11-22
鼠标移动到文字上面显示图片。jquery插件。网页特效插件
Jquery插件学习系列-QTip
jokeHello的专栏
09-20 1766
Qtip是一款Jquery提示插件，该提示插件可以显示文字，图片，也可以动态的加载文字和图片，该插件网址：点击打开链接；该免费插件在使用时需要先导入Jquery插件，然后再导入Qtip插件。 (我将该网站在上面提供的Demo自己实验了一遍，感觉很好用，我将就着用他们提供的例子。) 1、使用实例（文字提示）： "text/javascript">// Create the toolti
qTip2 精致的jQuery提示信息插件
zccst的专栏
10-29 344
作者：zccst（转） 三个文件： 从官方网站下载最新版本时，可以选择相应的样式及插件；可选的样式包括几种色彩风格(Colour Styles)、CSS3相关样式如圆角；以及以下各种插件，可根据自己需要选择： Ajax，这个不用说，请求远程内容的 Tips，气泡对话效果，如箭头 Modal，模态对话框效果，如jQuery UI Dialog / ThickBox ...
qTip--基于JQuery的Tooltip插件介绍
weixin_34080571的博客
08-31 221
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文件即...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值