HTML Page loading to Tooltip in jQuery

There  are many  tooltip plugnins  are  available in jQuery. Best  one is the qtip and here I'm going  to  explain how to  implement  dynamically  loading the html/html/other  file  to tooltip  using ajax method  in jquery.

Step 1: We  should include the jquery  library  file  and  qtip  js  and  css
   <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jquery.qtip.js"></script>
  <style type="text/css" src="jquery.qtip.css"></style>

Link to  Downlod: http://qtip2.com/download

Step 2:  html  code

<a href="#" rel ="search.html">SEARCH<a>

Step 3:  include the bellow  jquery code

$(document).ready(function()
{
        $('a[rel]').each(function() {
            $(this).qtip({
                content: {
                    text: 'Loading...',
                    ajax: {
                        url: $(this).attr('rel'),  //path to  the  htm/html  file
                        loading: false
                    },
                    button: 'Close' // Close button
                },
                position: {
                    corner: {
                        target: 'bottomRight', // Position the tooltip above the link
                        tooltip: 'bottomRight'
                    },
                    adjust: {
                        screen: true, // Keep the tooltip on-screen at all times
                        resize: true,
                        scroll: true,
                        x: 0,
                        y: 0
                    }
                },
                style:'qtip-light',
                show: {
                    solo: true,
                    when:'mouseenter',
                    effect: function() {
                       $(this).slideDown();
                    }
                },
                hide:false
            });
        });
});
For  more  tooltip  implement visit  to  link http://qtip2.com