qTip--基于JQuery的Tooltip插件介绍

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>  

 

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

 

1、Basic text

 

html如下所示：

 

Html代码
  1. <div id="content">  
  2.   <a href=" ">Basic text</a>  
  3. </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>  

 

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>  

 

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>  

 

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>  

 

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>  

 

6、Loading html

html如下所示：

 

Html代码
  1. <div id="content">  
  2.   <a href="#" rel="sample.html">Click me</a>  
  3. </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>  

 

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>  
posted @ 2010-08-31 09:03  ido  阅读(1426)  评论(1)  编辑  收藏  举报