Disabling browser tooltip text on links

Question

Having link like ,

<a href="/video/?index=4/multimedia-layover.png" title="This is title"></div></a>

I want to suppress the tool tips.

I have refereed this question. And i am trying to do something like adding this to link

onmouseover="title='';"

It is working but , when i am going to click on that link and want to process that title it is displaying empty string because i used onmouseover="title='';"

Is there is another way to disable tool tip ?

Only want to disable tool tip and not to make title to empty.

I would just like to know why? Keep the attribute, but not its standard functionality? — , Jan 13 '14 at 12:34

score 1 · Answer 1 · answered Jan 13 '14 at 12:33

Store title in another attribute when you remove it.Try this:

window.onload = function() {
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
    var link = links[i];
    link.onmouseover = function() {
        this.setAttribute("org_title", this.title);
        this.title = "";
    };
    link.onmouseout = function() {
        this.title = this.getAttribute("org_title");
    };
  }
};

score 1 · Accepted Answer · answered Jan 13 '14 at 12:43

Or via jQuery:

$('a[title]').each(function(idx, anchor) {
    var $anchor = $(anchor); 
    $anchor.attr('data-title', $anchor.attr('title')).removeAttr('title'); 
});

Not that mine does not reset the link back to propper functionality. You can also extend the [title] portion by adding a class, for example .no-tooltip (thus: [title].no-tooltip). This removes the title on ALL anchor tags having a TITLE attribute AND having the class no-tooltip.

score 0 · Answer 3 · answered Jan 29 '14 at 09:20

My solution is similar to Milind's answer above but using jQuery.

    jQuery(document).ready(function() {
        jQuery("a[rel]").each(function() {
            var saveAlt = jQuery(this).attr('alt');
            var saveTitle = jQuery(this).attr('title');
            jQuery(this).mouseenter(function() {
                jQuery(this).attr('title', '');
                jQuery(this).attr('alt', '');
            });
            jQuery(this).mouseleave(function() {
                jQuery(this).attr('alt', saveAlt);
                jQuery(this).attr('title', saveTitle);
            });
            jQuery(this).click(function() {
                jQuery(this).attr('alt', saveAlt);
                jQuery(this).attr('title', saveTitle);
            });
        });
    });

You will have to change the jQuery selector as per your requirement. I wanted this to work with LightBox and qTip2 where you have to suppress default tooltip but allow LightBox to show the image title when the bigger image is shown.

Tried and working for Chrome, IE and Firefox.

Disabling browser tooltip text on links

3 Answers3