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.
WOW IT WORKS! Whether the data-tooltip is just a pseudo attribute? Is it valid?
Actually I also want to change the tooltip removal with fadeOut effect. But why didn’t ever works? Is the fadeOut was never completely eliminate the element and the contents? Even slideUp and hide nor can be used…
The data-tooltip is a valid attribute in HTML5. Anything with data- in front is valid. I could have just as easily saved the tooltip title into the element’s jQuery data.
The reason fadeOut isn’t working is because the #tooltip isn’t unique. If you unhover the element with a tooltip and immediately hover over another tooltip, the tooltip div has fadeIn() applied as soon as the content changes. You could make a unique tooltip id for each element, but it could get messy if you don’t make sure the tooltips are removed – which I’ve seen happen if a user goes crazy nuts hovering and unhovering numerous tooltips.