jquery - remove the builtin tool tip on hover?

Question

I made a tool tip using html, jquery, and css. The Tool tip uses the title attribute in order to show its contents.

<a href="#" class="tooltip" title="Hello">Hover Me</a>

When I hover the link I see the tool tip and its working fine. The problem is that I also see the built in html tool tip. Is there any way to disable that html tool tip ? OR is there any other attribute that I can use to solve this problem ?

Answer 1

You can also define an arbitrary attribute that you target for your purpose. This is easy to do using JQuery.

ex: <a href="#" class="tooltip" data-tooltip="Hello">Hover Me</a>

Answer 2

To maintain SEO and so forth, I'd just remove the title attribute temporarily, and then add it back in; something like this:

$('element').hover(function() {
    var title = $(this).prop('title');  
    $(this).data('orig-title', title).prop('title', '');
}, function() {  
    $(this).prop('title', $(this).data('orig-title'));
});