Reputation: 1474
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!
Upvotes: 0
Views: 1036
Reputation: 2166
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)
<a href="#" title="foo" class="location">Test Link</a>
$('.location').each(function() {
var $this = $(this);
$this
.data('title', $this.attr('title'))
.removeAttr('title');
});
Working:
<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');
Upvotes: 2