qTip2 - My test case

HTML

<script src="http://qtip2.com/v/stable/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://qtip2.com/v/stable/jquery.qtip.css">
<div>
<a href='#' id='demo2_desc' data-hasqtip='true'>demo2</a><span style='display:none'>this should work</span>
</div>
<div id=demo1>
</div>

CSS

.tooltiptext {
  display: none;
}

.tips {
  display: inline-block;
  margin: 10px;
}

.nameField:hover {
    color:red !important;
    background-color:yellow;
}

JavaScript

addTooltips();
   $("#demo1").append("<a href='#' id='demo1_desc' data-hasqtip='true'>demo 1111</a><span style='display:none'>this should work</span>");
   
function addTooltips() {  
$('a[id$="_desc"]').each(function() {
    $(this).qtip(
        {
          content: {
            // Set the text to an image HTML string with the correct src URL to the loading image you want to use
            text: $(this).next('span'),
            title: {
              text: ' ' + $(this).text(), // Give the tooltip a title using each elements text
              button: false
            }
          },
          position: {
            at: 'bottom  center', // Position the tooltip above the link
            my: 'top center',
            viewport: $(window), // Keep the tooltip on-screen at all times
            effect: false // Disable positioning animation
          },
          show: {
            event: 'mouseover',
            solo: true // Only show one tooltip at a time
          },
          hide: {
            event: 'mouseout',
            fixed: true,
            delay: 500
          },
          style: {
            classes: 'qtip-wiki qtip-light qtip-shadow',
            width: '300px'
          }
        })
    .click(function(event) { event.preventDefault(); });
  });
}