Question

I have a span and an anchor inside a table cell. I have the anchor set up to show a tooltip. I would like the text inside the span to be used for the tooltip. How can I select this text in jQuery?

  <td class="row-head" colspan="5"><span class="tip-text">Complete Coverage</span><a href="#" class="help"></a></td>

JQuery code – the current selector always finds the first instance only for all tips.

$(document).ready(function() {
  $('.help').qtip({ style: { name: 'cream', tip: true },
                 content: {
                 text: $(this).find('span.tip-text').html() 
   } });
});

Thanks

Answer 1

Your problem is that $(this) is being evaluated in the document ready functions context, you can use the .each() function to iterate over each .help. The function you are looking for to find the .tip-text could easily be .prevAll() or .siblings().

$(document).ready(function() {
  $('.help').each(function() {
     // iterate over each .help, find its span.tip-text and create the qtip
     $(this).qtip({ 
       style: { name: 'cream', tip: true },
       content: {
         text: $(this).siblings('span.tip-text').html() 
       } 
     });
  });
});