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 ?

enter image description here

Remove the title attribute on hover, and then add it back in on mouseout. — BenM, Mar 30 '13 at 18:53

score 2 · Accepted Answer · answered Mar 30 '13 at 18:55

2

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>

answered Mar 30 '13 at 18:55

TGH

38,769
12
102
135

You should at least use standards-compliant custom attributes. `data-tooltip` would have been acceptable. – jwueller Mar 30 '13 at 18:58
I agree. Updated my answer – TGH Mar 30 '13 at 18:59
Thats better! It is not as accessible as the native `title` attribute, but still better than nothing. – jwueller Mar 30 '13 at 19:00
how do I select the data-tooltip ? like this ? this.data("tooltip") ? – Max Pain Mar 30 '13 at 19:00
@MaxPain - Yes, exactly. Just make sure that `this` is a jQuery object, and not a native DOM node. You may need to write this: `$(this).data('tooltip')` – jwueller Mar 30 '13 at 19:00
retrieve it like this: $("#element").attr("data-tooltip") – TGH Mar 30 '13 at 19:00
Set it like this: $("#element").attr("data-tooltip","some value") – TGH Mar 30 '13 at 19:01

BenM · Answer 2 · 2013-03-30T19:10:52.723

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'));
});

edited Mar 30 '13 at 19:10

answered Mar 30 '13 at 19:00

BenM

52,573
26
113
168

Shouldn't `.prop()` be `.attr()`, if the markup contains a `title` attribute? – jwueller Mar 30 '13 at 19:03

remove the builtin tool tip on hover?

2 Answers2