Question

I have a simple status/progress bar built with HTML/CSS, the percentage is generated depending on the HTML in a span tag. I am then trying to generate a tooltip title depending on the percentage. The issue is the tooltip title is not working. Hopefully the below code can explain it better than me.

HTML

<span class="status">Open</span>
  <div class="prog-container">
    <a href="#" class="form-info" rel="tooltip" title="a">
      <div class="progress rounded clearfix">
        <div class="prog-quart fl">&nbsp;</div>
        <div class="prog-half fl">&nbsp;</div>
        <div class="prog-three-quart fl">&nbsp;</div>
        <div class="prog-perc"></div>
      </div>
    </a>
  </div>

jQuery to generate the percentage based on the status

$('.status:contains("Open")').next().find('.prog-perc').html("25%");
$('.status:contains("Open")').next().find('.prog-quart').addClass('prog-fill');

jQuery to generate the tooltip title based on the percentage generated above

$('.prog-perc:contains("25%")').parent().prev().attr("title", "25 percent tooltip");

Also I’m using HTML5 so before anyone brings it up wrapping divs with anchor tags is valid

Answer 1

As I understand, you want to change title of anchor

<a href="#" class="form-info" rel="tooltip" title="a">

If so then you should change

this line of code

$('.prog-perc:contains("25%")').parent().prev().attr("title", "25 percent tooltip");

to

$('.prog-perc:contains("25%")').parents('a').attr("title", "25 percent tooltip");

or you can try

$('.prog-perc:contains("25%")').closest('a').attr("title", "25 percent tooltip");