CODEWITHSUNDEEP
htmlcssslimbox
Johan
Johan

Reputation: 19072

Is it possible to hide href title?

<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?

Upvotes: 20

Views: 70099

Answers (16)

jeroen
jeroen

Reputation: 91744

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.

Upvotes: 17

Joel Zarrias
Joel Zarrias

Reputation: 1

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.

Upvotes: 0

user1855153
user1855153

Reputation: 579

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

Upvotes: 0

radu.luchian
radu.luchian

Reputation: 379

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

Upvotes: 0

Niels Abildgaard
Niels Abildgaard

Reputation: 2980

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

Upvotes: 0

Lokin
Lokin

Reputation: 71

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.

Upvotes: 7

Aldee
Aldee

Reputation: 4528

the easiest way would be :

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

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

hope it can help..

Upvotes: 1

Jim
Jim

Reputation: 31

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

Upvotes: 3

fruitwerks
fruitwerks

Reputation: 91

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 :)

Upvotes: 9

bobince
bobince

Reputation: 536399

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.)

Upvotes: 18

David Thomas
David Thomas

Reputation: 253318

// 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)

Upvotes: 2

Karl Johan
Karl Johan

Reputation: 4022

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 = ""
}

Upvotes: 0

Timothy S. Van Haren
Timothy S. Van Haren

Reputation: 8966

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.

Upvotes: 1

stefita
stefita

Reputation: 1793

if you are using jquery, you could do following

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

(haven't tested it though)

Upvotes: 0

Jon Hadley
Jon Hadley

Reputation: 5296

Override/overlay it with an empty jQuery tooltip?

Upvotes: 0

Nathan Taylor
Nathan Taylor

Reputation: 24606

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.

Upvotes: 0

Related Questions