Try this (demo):
$(function() {
$('acronym').hover(function() {
var tip = $(this).attr('data-tooltip') || $(this).attr('title');
var tiptip = $(this).text();
$(this).attr({
'title': '',
'data-tooltip': tip
});
$(this).append('' + tiptip + '
' + tip + '');
$('#tooltip').fadeIn();
}, function() {
$('#tooltip').remove();
});
});
Basically we store the tooltip in a new attribute “data-tooltip” instead of saving it back into the title. The first line should work like this: the first time it sees it, there is no “data-tooltip” so it is undefined, so the “||” (or) goes to the next item which is the title. We later save the title into the data-tooltip so all subsequent times the first line is encountered, the data-tooltip is defined and it never continues to the title. I hope that makes sense.
