Question

Using jQuery’s qtip plugin, I’m trying to display hidden value (that’s already rendered wher hovering over the icons. The problem is that it’s only grabbing the first item in the list and displaying that in qtip. Now I know the usual answer would be to use the “this” selector to target it, but in this case it’s just not working…

Here’s the code:

jQuery('li dl dd.job_icons').qtip({
    content: {
      prerender : true,
      text: jQuery('li dl dd.job_icons').html()
    }
});

And I’ve tried using this as well with no luck:

text: jQuery(this).html()

To get a clearer picture, check out this link and hover over the icons (some have different dates, and other will have salary and company name icons that should also be displayed)

Thanks in advance…

EDIT: Here’s the html that gets rendered

<li class="job job-alt job-featured"> 
 <dl> 
  <dt>Type</dt> 
  <dd class="type"><span class="jtype full-time">Full-Time</span></dd> 

  <dt>Job</dt> 
  <dd class="title"> 
    <strong>
    <a href="http://rockstar.tinygiantstudios.co.uk/jobs/front-end-developer-2/">Front End Developer</a>
    </strong> 
  </dd> 

  <dt>Location</dt> 
  <dd class="location">Anywhere</dd> 

  <dt>Job Admin</dt>    
    <dd class="job_icons"> 
    <div class="job_icons_wrap"> 
     <span class="job_date_detail">7 Feb</span> 
     <a href="#" class="job_date_icon"></a> 

     <a href="http://tinygiantstudios.co.uk" rel="nofollow" class="job_lister_detail">Tiny Giant Studios</a> 
     <a href="#" class="job_lister_icon"></a> 

     <span class="job_salary_detail jtype 100000-and-above">100,000 and above</span>
     <a href="#" class="job_salary_icon"></a> 
 </div>    
 </dd> 
</dl> 
</li>

Answer 1

Try each(). It has the proper scoping to use this.

jQuery('li dl dd.job_icons').each(function() 
    jQuery(this).qtip({
        content: {
          prerender : true,
          text: jQuery(this).html()
        }
    });
});