Is it possible to hide href title?

Question

<a href="link.html" title="Titletext">

...is the code.

I need to use the title attribute because of slimbox, but I want to hide the title-text that shows up when hovering the mouse over the link.

Any ideas?

Answer 1

How about a nice simple:

<a href="link.html" title="Titletext"><span title=" ">text</span></a>

(Better, put something actually useful in the nested title.)

Answer 2

Supposing you are using an image tag in the a tag, you can just use an alternative title for the image (even a space) and that will overwrite the title of the link when you hover over it.

Answer 3

This is really easy with jQuery

$("li.menu-item > a").attr('title', '');

That will remove the title from any a elements of the li class menu-item - of course you can get fancy so they just hide on a mouse over :)

Answer 4

In Regards to the "how about a nice simple" suggestion I've seen listed on several sites, I personally would not suggest this for two reasons.

1. Screen readers and visually impaired users rely on title attributes which are read out loud. I believe this was the initial purpose and reason for them in anchor tags and is a large aspect of USA Gov. Web Accessibility Section 508. I think a screen reader in this instance would read through all the titles; the first one and then the second one which could be very confusing for the visually impaired user. They would not understand why they are hearing two esp if it holds different text. Is it two different anchors they are hearing about? If so, why can they not click or select the other one they hear and keep getting only one web page (as a scenario).

2. If you place additional text in both title's Google and many other search engines may view this action as black hat seo and could lead your site to getting banned from that search engines listing (aka stuffing), this happened to BMW in Germany by Google already.

I personally would think the best method is to keep the title attribute as it was meant to function and then use Javascript or css to somehow hide it. These methods would have no impact on screen readers, web crawlers, and visually impaired users.

Answer 5

I got fancy with jquery... ;) I needed this for a portfolio: title-tags for a lightbox but none on mouse-over. This worked for me, thanks for the hint!

$(function(){
    $("li.menu-item > a").hover(function(){
        $(this).stop().attr('title', '');},
        function(){$(this).stop().attr();
        });
});

Answer 6

// Suppress tooltip display for links that have the classname 'suppress'

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

To quote Aron Rotteveel's answer from the first dupe linked in my comment to the question (Disabling browser tooltips on links and <abbr>s)

Answer 7

You don't have to use the title attribute with Slimbox. See the Multiple Images example near the top of this page: http://code.google.com/p/slimbox/wiki/MooToolsAPI.

You can simply remove the title attribute from your anchor, and pass the title text (your image's description) to the Slimbox open function, which you would call using the onclick event of your anchor.

Answer 8

the easiest way would be :

after using your slimbox, add the following code below it:

$('*[title]').removeAttr('title');

hope it can help..

Answer 9

Using the idea from David Thomas, you can create a more elegant solution using jQuery:

$('[title]').each(function(){
    $(this).data('original-title', $(this).attr('title'));
}).hover(
    function () { 
        $(this).attr('title','')
    }, function () { 
        $(this).attr('title',$(this).data('original-title'))
});

Answer 10

jQuery solution - this should be straight forward:

var hiddenTitle; //holds the title of the hovered object
$("li.menu-item > a").hover(function() {
    hiddenTitle = $(this).attr('title'); //stores title
    $(this).attr('title',''); //removes title
}, function() {
    $(this).attr('title',hiddenTitle); //restores title
});

Answer 11

No guarantees but depending on how Slimbox works you may be able to include the title then use something like jQuery to remove it a few seconds after page load. Assuming Slimbox indexes the Title attribute and stores it somewhere after reading it in, you may be able to safely remove it after this happens.

Answer 12

Couldn't you just loop through the links in the DOM and set the title attribute to an empty string.

var DOMlinks = document.links;
for(i=0;i<DOMlinks.length;i++){
DOMlinks[i].title = ""
}

Answer 13

Override/overlay it with an empty jQuery tooltip?

Answer 14

if you are using jquery, you could do following

$("a").mouseover(function(e){ preventdefault();} );

(haven't tested it though)

Answer 15

This is my jQuery solution, it does everything you need and keep the correct usage of the title attribute. Simply change the selector according to your needs.

/*
 * jQuery remove title browser tooltip
 */
var removeTitleSelector = 'a.removeTitle';
jQuery('body').on('mouseover', removeTitleSelector, function () {
    jQuery(this).data('title', jQuery(this).attr('title'));
    jQuery(this).removeAttr('title');
}).on('mouseout', removeTitleSelector, function () {
    jQuery(this).attr('title', jQuery(this).data('title'));
});

Answer 16

As read on another question, I suggest to switch the "title" attribute to some "data-title" in order to keep it available for screen readers for disabled users. As Lokin said, maintaining the usability of the site to impaired and disabled users should be also something to concern about when developing.