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

You are using jQuery, why do you use such a long code? It can be very simple! — Praveen Kumar Purushothaman, Sep 30 '12 at 17:40
exact duplicate of http://stackoverflow.com/questions/809795/suppress-link-titles — RASG, Sep 30 '12 at 17:49
Why don't you want tooltips for your users? If there's relevant data, show it to them - both screenreaders and visual browsers; else don't use title attributes at all. — Bergi, Sep 30 '12 at 17:54

moonwave99 · Answer 1 · 2012-09-30T18:03:14.150

4

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.

edited Sep 30 '12 at 18:03

answered Sep 30 '12 at 17:40

moonwave99

21,957
3
43
64

Which browser are you using? Works fine here in OS X Chrome. – moonwave99 Sep 30 '12 at 17:56
ie9, chrome Version 22.0.1229.79 m, firefox15.0.1 – tarisata Sep 30 '12 at 18:02
Have you tried the fiddle? If you are trying it your page, be sure to include jQuery library and to wrap the code in the `$(function(){ ... });` wrapper - see my edit. – moonwave99 Sep 30 '12 at 18:04

score 2 · Answer 2 · answered Sep 30 '12 at 17:40

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

answered Sep 30 '12 at 17:40

Praveen Kumar Purushothaman

164,888
24
203
252

1

he said "still visible in the code for screen readers". would the screen reader still be able to read it after removed? – RASG Sep 30 '12 at 17:41
Hmm.. Yeah, will change the code and update the answer in a few seconds. :) – Praveen Kumar Purushothaman Sep 30 '12 at 17:42
`rel` is for storing link relationship, not for custom data: use `data-whatever` better. – moonwave99 Sep 30 '12 at 17:47

DrupalFever · Answer 3 · 2015-03-03T19:54:01.853

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/

score 0 · Answer 4 · answered Jun 04 '20 at 06:22

$(".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);

});

Please format code properly and give some explanation to your answer — Sfili_81, Jun 04 '20 at 06:40

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

4 Answers4