<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?
<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?
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.
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 = ""
}
if you are using jquery, you could do following
$("a").mouseover(function(e){ preventdefault();} );
(haven't tested it though)
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.
// 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 (http://stackoverflow.com/questions/457366/disabling-browser-tooltips-on-links-and-abbrs)
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.
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.)
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.)
It works, thank you!
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.