qTip2 - My test case

by bthorn

HTML

<script src="http://qtip2.com/v/stable/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://qtip2.com/v/stable/jquery.qtip.css">
<a href="#test">Sample link</a>
<div class="tooltiptext">
    Complex <b>inline</b> <i>HTML</i> in your <u>config</u>
</div>
<table>
<tr><td class="tips" title='title test'>test this</td><td>adf</td></tr>
</table>
<form name="myform" id="myform">
    <table id="blacklistgrid">
        <tr id="Row1">
            <td class="space">&nbsp;</td>
            <td>Red</td>
            <td>Yellow</td>
            <td>Green</td>
        </tr>
        <tr id="Row2">
            <td>
                <input type="text" class="tips" title='title test' placeholder="shade" name="shade" />
            </td>
            <td>
                <input type="checkbox" name="red" />
            </td>
            <td>
                <input type="checkbox" name="yellow" />
            </td>
            <td>
                <input type="checkbox" name="green" />
            </td>
        </tr>
    </table>
    <button type="button" id="btnAdd">Add few more Rows!</button>
    </br>
    </br>
    <button type="button" id="btnAddCol">Add new column</button>
    </br>
    </br>
    <input type="submit"></input>
</form>

CSS

body{
    padding: 50px;
}
.tooltiptext{
    display: none;
}

JavaScript

// Create the tooltips only when document ready
 $(document).ready(function()
 {
     // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
     $('a').each(function() {
         $(this).qtip({
             content: {
                 text: $(this).next('.tooltiptext')
             }
         });
     });
     
     $('.tips').each(function(){
     		$(this).qtip({
        	content: {
          	//text: 'test this out'
            text: $(this).attr("title") //$(this).next('.tips')
          }
        });
     });
     
 });
 
 
  $(document).ready(function () {
     $('#btnAdd').click(function () {
         var count = 3,
             first_row = $('#Row2');
         while (count-- > 0) {
         	first_row.clone().appendTo('#blacklistgrid');
           loadQtip();
         }
         
     });
     
function loadQtip() {
    $('.tips').qtip({
        content: 'This is the message!',
        show: { ready: true, when: false },
        hide: { fixed: false },
        position: {
            corner: {
                target: 'topLeft',
                tooltip: 'bottomRight'
            }
        }
        //style: {
        //  ............ styling code here................
        //  }
    });
    
}
     
     var myform = $('#myform'),
         iter = 0;
     $('#btnAddCol').click(function () {
         myform.find('tr').each(function(){
           var trow = $(this);
             if(trow.index() === 0){
                 trow.append('<td>Col'+iter+'</td>');
             }else{
                 trow.append('<td><input type="checkbox" name="cb'+iter+'"/></td>');
             }
            
         });
         iter += 1;
     });
 });