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>  

<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>  

<script type="text/javascript">
  $(document).ready(function()
  {
    $('#content a[href]').qtip(
    {
      content: 'Some basic content for the tooltip'
    });
  });
</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>  

<script type="text/javascript">
  $(document).ready(function()
  {
    $('#content a[href][title]').qtip({
      content: {
        text: false
      },
      style: 'cream'
    });
  });
</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>  

<script type="text/javascript">
  $(document).ready(function()
  {
    $('#content a[href]').qtip({
      content: '<img src="small.png" alt="Image" />'
    });
  });
</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>  

<script type="text/javascript">

  var corners = 'bottomLeft';
  var opposites = 'topRight';

  $(document).ready(function()
  {
    $('#content a')
    .hover(function()
    {
      $(this).html(opposites)
      .qtip({
        content: corners,
        position: {
          corner: {
            tooltip: corners,
            target: opposites
          }
        },
        show: {
          when: false,
          ready: true
        },
        hide: false,
        style: {
          border: {
            width: 5,
            radius: 10
          },
          padding: 10,
          textAlign: 'center',
          tip: true,
          name: 'cream'
        }
      });
    });
  });
</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>  

<script type="text/javascript">
  $(document).ready(function()
  {
    $('#content img').each(function()
    {
      $(this).qtip(
      {
        content: '<a href=" ">Edit</a> | <a href=" ">Delete</a>',
        position: 'topRight',
        hide: {
          fixed: true
        },
        style: {
          padding: '5px 15px',
          name: 'cream'
        }
      });
    });
  });
</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>  

<script type="text/javascript">
  $(document).ready(function()
  {
    $('#content a[rel]').each(function()
    {
      $(this).qtip(
      {
        content: {
          url: $(this).attr('rel'),
          title: {
            text: 'Wiki - ' + $(this).text(),
            button: 'Close'
          }
        },
        position: {
          corner: {
            target: 'bottomMiddle',
            tooltip: 'topMiddle'
          },
          adjust: {
            screen: true
          }
        },
        show: {
          when: 'click',
          solo: true
        },
        hide: 'unfocus',
        style: {
          tip: true,
          border: {
            width: 0,
            radius: 4
          },
          name: 'light',
          width: 570
        }
      })
    });
  });
</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.       $(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>  

<script type="text/javascript">
  $(document).ready(function()
  {
    $('a[rel="modal"]:first').qtip(
    {
      content: {
        title: {
          text: 'Modal tooltips sample',
          button: 'Close'
        },
        text: 'hello world'
      },
      position: {
        target: $(document.body),
        corner: 'center'
      },
      show: {
        when: 'click',
        solo: true
      },
      hide: false,
      style: {
        width: { max: 350 },
        padding: '14px',
        border: {
          width: 9,
          radius: 9,
          color: '#666666'
        },
        name: 'light'
      },
      api: {
        beforeShow: function()
        {
          $('#qtip-blanket').fadeIn(this.options.show.effect.length);
        },
        beforeHide: function()
        {
          $('#qtip-blanket').fadeOut(this.options.hide.effect.length);
        }
      }
    });

    $('<div id="qtip-blanket">')
    .css({
      position: 'absolute',
      top: $(document).scrollTop(),
      left: 0,
      height: $(document).height(),
      width: '100%',

      opacity: 0.7,
      backgroundColor: 'black',
      zIndex: 5000
    })
    .appendTo(document.body)
    .hide();
  });
</script>