qTip2 - My test case

by amitava82

HTML

<script src="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.css">
<a href="#test" title="Tooltip text">Sample link</a>
<div id="scroll">
<table>
    <tr>
        <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
        <td><button>tip</button></td>
    </tr>
        <tr>
        <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
        <td><button>tip</button></td>
    </tr>    <tr>
        <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
        <td><button>tip</button></td>
    </tr>
    <tr>
        <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
        <td><button>tip</button></td>
    </tr> <tr>
        <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
        <td><button>tip</button></td>
    </tr>
 <tr>
        <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
        <td><button>tip</button></td>
    </tr> <tr>
        <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
        <td><button>tip</button></td>
    </tr>
  <tr>
        <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
        <td><button>tip</button></td>
    </tr>
    <tr>
        <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
         <td>Test Test</td>
       ...

CSS

body{
    padding: 50px;
}
td{
border: 1px solid;
    padding: 5px 10px;
}
#scroll{
height: 300px;
    width: 400px;
    overflow: auto
}
.CallForCategoryList label{display: block; padding: 2px }

JavaScript

// Create the tooltips only when document ready
$(document).ready(function() {
    // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
    $('button').click(function() {
        var options = {
            content: {
                text: $(".CallForCategoryList"),
                title: {
                    text: "call for"
                }
            },
            show: {
                event: 'click',
                solo: true,
                // Only show one tooltip at a time
                ready: true
            },
            hide: {
                fixed: true,
                event: 'click'
            },
            position: {
                container: $('#scroll')
            },
            events: {
                render: function(event, api) {
                    api.options.position.container.bind('scroll', api.reposition);
                }
            }
        };
        var settings = $.extend(true, {}, qTipConfig, options);
        $(this).qtip(settings);
    })


});


var qTipConfig = {

    position: {
        at: 'right center',
        // Position the tooltip above the link
        my: 'left center',
        viewport: $(window),
        // Keep the tooltip on-screen at all times
        effect: false // Disable positioning animation
    },
    show: {
        event: 'click',
        solo: true,
        // Only show one tooltip at a time
        ready: true,
        delay: 0,
        effect: false
    },
    hide: {
        fixed: true,
        event: 'unfocus'
    },
    style: {
        classes: 'ui-tooltip-shadow ui-tooltip-tipped'
    },
    content: {
        text: '<img src="/Images/ajaxLoader.gif" /> Loading...',
        title: {
            button: 'close'
        }
    }
};