Question

I’m trying to remove the title attribute from a link and reuse it for a tooltip, here’s a snippet of the code that’s giving me trouble:

 $('.location').each(function() {
    var $this = $(this);
    $this
      .data('title', $this.attr('title'))
      .removeAttr('title');
  });


$('.location').hover(function(e) {
    //hover over code   

    //grabs what's inside the title attribute in the html
    var titleText = $(this).data('title');

    //saves the tooltip text using the data method, so that the orignal tooltip text does not conflict
    $(this)
        .data('tipText', titleText)
        .removeAttr('title');

I included the following code from searching here:

   $('.location').each(function() {
    var $this = $(this);
    $this
      .data('title', $this.attr('title'))
      .removeAttr('title');
  });

And that’s working well, but only once, if I go back to the link in IE8, the original tooltip reappears. Any solutions for this? Thank you!

Answer 1

Are you able to change the title attr to something other than title? I believe title is a reserved word and may cause some issues.

Non-Working: (updated with code below, now works)

http://jsfiddle.net/abZ6j/3/

<a href="#" title="foo" class="location">Test Link</a>​

$('.location').each(function() {
    var $this = $(this);
    $this
        .data('title', $this.attr('title'))
        .removeAttr('title');
});​

Working:

http://jsfiddle.net/abZ6j/1/

<a href="#" linkTitle="foo" class="location">Test Link</a>​


$('.location').each(function() {
    var $this = $(this);
    $this
        .data('title', $this.attr('linkTitle'))
        .removeAttr('linkTitle');
});​

UPDATED:

Actually, looking at it closer, you CAN use title but in this particular instance it might be better to access it outside of $.data(). Perhaps something like:

var $this = $(this);
var t = $this.attr('title');
$this
  .data('title', t)
  .removeAttr('title');

• Updated “Non-Working” jsFiddle code to reflect above.