How to hide the native tooltip in IE when using jQuery Tooltip?

Question

Have a little problem again with my little application. you can find it here.

In Chrome, Firefox, ... Everything runs fine. In Internet explorer there's a little issue.

As i'm using jQuery UI ToolTip, the default tooltip may not be shown... In Internet Explorer, it does appear anyway.

Somebody who knows how to fix this little problem?

Thanks!

@Swarnajith I can reproduce OPs error in the same browser. It is appearing sometimes and never - when 'Developer Tools' window is opened =) — Alex G.P., Feb 07 '13 at 09:09
This is most likely caused by the `title` attributes of the `area` elements. See Alex's answer for a workaround. — Boaz, Feb 07 '13 at 09:18

score 2 · Answer 1 · answered Feb 07 '13 at 09:07

2

I only may suggest do not use title attribute. You may use instead, for example, data-title attribute or any other name started with data-. After that specify required attribute using items option of plugin:

$('area').tooltip( { items: 'area[data-title]' } );

answered Feb 07 '13 at 09:07

Alex G.P.

9,609
6
46
81

Unfortunately, it doesn't show any Tooltip at all if I set the attribute data-title, and the items option... – Tom V. Feb 07 '13 at 14:08
Could you provide sample of your code on jsfiddle.net? I suspect that it is just matter of correct selector for 'items'. – Alex G.P. Feb 07 '13 at 15:24

score 0 · Answer 2 · answered Feb 07 '13 at 18:49

@Alex G.P. When I only used the "items" option, it didn't show anything at all. I had to add a "content" option as well:

$("area").tooltip({ track: true, items: "area[data-title]", content: function () { return $(this).attr("data-title")} });

Now it works fine:) Thank you anyway!

How to hide the native tooltip in IE when using jQuery Tooltip?

2 Answers2