hide title attribute from link on mouse hover with javascript/jquery

Question

I am using the title attribute in all my links but I don't want to be visible on mouse hover, but still visible in the code for screen readers.

var links = document.getElementsByTagName('a');

for (var i = 0; i < links.length; i++) {
    if (links[i].className == 'suppress') {
    links[i]._title = links[i].title;
    links[i].onmouseover = function() { 
    this.title = '';
}

links[i].onmouseout = function() { 
    this.title = this._title;
}

Answer 1

Using jQuery, you can hide the title attr on hover, and replace it on mouseout:

$(function(){

    $('a').hover(function(e){

        $(this).attr('data-title', $(this).attr('title'));
        $(this).removeAttr('title');

    },
    function(e){

        $(this).attr('title', $(this).attr('data-title'));

    });​

});

Like in this fiddle .

Answer 2

Since you are using jQuery, you can do it in a simple way:

$(document).ready(function(){
    $("a").removeAttr("title");
});

Or, setting it to empty value:

$(document).ready(function(){
    $("a").attr("title", "");
});

If this is gonna change the way the screen readers read, then, you can just target on hover.

$(document).ready(function(){
    $("a").hover(function(){
        $(this).attr("rel", $(this).attr("title"));
        $(this).removeAttr("title");
    }, function(){
        $(this).attr("title", $(this).attr("rel"));
        $(this).removeAttr("rel");
    });
});

Answer 3

I was trying to create a bubble tool-tip in CSS but the browser tool-tip would always appear and mess things up. So, like you, I needed to disable the default tool-tip.

I used a bit of JQuery to remove the "Title" tag but only on mouse hover. As soon as the mouse is out, the "Title" tag is restored.

Following is a DIV with some "Title" content:

<div class="tooltip-class" title="This is some information for our tooltip.">
  This is a test
</div>

Now you can run the following JQuery to hide the Title tag on mouse hover:

$(document).ready(function(){
  $(".tooltip-class").hover(function(){
    $(this).attr("tooltip-data", $(this).attr("title"));
    $(this).removeAttr("title");
  }, function(){
    $(this).attr("title", $(this).attr("tooltip-data"));
    $(this).removeAttr("tooltip-data");
  });
});

Following is a link to the full example:

http://jsfiddle.net/eliasb/emG6E/54/

Answer 4

$(".element").hover(function(){

    // Get the current title
    var title = $(this).attr("title");

    // Store it in a temporary attribute
    $(this).attr("tmp_title", title);

    // Set the title to nothing so we don't see the tooltips
    $(this).attr("title","");

});

$(".element").click(function(){// Fired when we leave the element

    // Retrieve the title from the temporary attribute
    var title = $(this).attr("tmp_title");

    // Return the title to what it was
    $(this).attr("title", title);

});