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>
    <tr id="clone-me">
      <td>
        <input type="text" class="tips" placeholder="clone me" 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,
      row = $('#clone-me').children().clone();

    while (count-- > 0) {
      row.clone().appendTo('#blacklistgrid tbody').wrapAll('<tr></tr>');
      loadQtip();
    }

  });

  function loadQtip() {
    $('.tips:not([data-hasqtip])').qtip({
      content: 'This is the message!',
      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;
  });
});