Question

I have an unordered list like this:

<div class="blueBoxMid">
  <ul>
    <li>First item <em>This is the hover text</em></li>
    <li>Second item <em>This is the hover text</em></li>
  </ul>
</div>

I want to use jQuery to generate this:

<div class="blueBoxMid">
  <ul>
    <li title="This is the hover text">First item</li>
    <li title="This is the hover text">Second item</li>
  </ul>
</div>

My current code looks liket his, but I couldn’t get it to work. Help anyone? 🙂

$('.blueBoxMid li').each(function(){
  $('.blueBoxMid li em').hide();
  $('.blueBoxMid li').attr('title', $(this).children('em').text()).hover(function(){$(this).css('cursor', 'help')});
});

Answer 1

Try something like this:

$('div.blueBoxMid ul li').each(function () {
    var tooltip = $(this).children('em').remove().text();
    $(this).attr('title', tooltip).css('cursor', 'help');
});

Basically, it loops through every <li> element, removes its <em> element and gets the text contents of the <em> element, then it applies the title attribute and CSS style. The CSS style can be on always (not only on hover) since it will only change the cursor when hovered anyways.