What do you think of this straightforward suggestion:

<a href="page.html" title="Description"><span title="Click Here">text</span></a>

(It's always best to include relevant information in the nested title.)

Using jQuery makes this task a breeze

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

This code snippet removes the title attribute from any anchor elements within list items with the menu-item class - you can also enhance it to make them hide on mouseover for added flair :)

When it comes to the suggestion of "how about a nice simple" that has been circulating on various websites, I have my reservations for a couple of reasons.

1. Title attributes are crucial for screen readers and visually impaired users, as they provide important information audibly. This is a key component of USA Gov's Web Accessibility Section 508. It could be confusing for a visually impaired user if multiple titles are present and read out loud by a screen reader. They may not understand why they are hearing two different titles with different text. This could lead to confusion as to whether they are separate anchors or related content. Additionally, using excessive text in titles could trigger search engines like Google to flag it as black hat SEO, potentially resulting in your site being banned from their listings, as was the case with BMW in Germany.

2. In my opinion, a better approach would be to maintain the intended functionality of the title attribute and find ways using Javascript or CSS to conceal it without affecting screen readers, web crawlers, and visually impaired users.

It's essential to ensure accessibility and compliance while optimizing your website for search engines.

I decided to get a little creative with jquery... ;) I wanted to incorporate title-tags for a lightbox in my portfolio without them appearing on mouse-over. This solution ended up working well for me, so thank you for the suggestion!

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

// Prevent tooltip display for links with the 'suppress' class

var allLinks = document.getElementsByTagName('a');
for (var j = 0; j < allLinks.length; j++) {
    if (allLinks[j].className == 'suppress') {
        allLinks[j]._titleAttr = allLinks[j].title;
        allLinks[j].onmouseover = function() {
             this.title = '';
        }
        allLinks[j].onmouseout = function() {
             this.title = this._titleAttr;
        }
    }}

In the words of Nadine Schaeffer's response from the initial duplicate linked in my comment on the query (Disabling browser tooltips on links and <abbr>s)

If you're using Slimbox, there's no need to use the title attribute. Take a look at the Multiple Images example on this page: http://code.google.com/p/slimbox/wiki/MooToolsAPI.

All you have to do is remove the title attribute from your anchor and instead pass the text (which would be your image's description) to the Slimbox open function. To trigger this function, simply call it with the onclick event of your anchor.

If you're looking for a quick solution, try this:

After utilizing your slimbox feature, include the following code:

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

I hope this suggestion proves useful!

While it's not a certainty, there is a possibility that with Slimbox, you could potentially include the title and then utilize jQuery to eliminate it a short time after the page finishes loading. If Slimbox indeed catalogues the Title attribute and saves it in a designated location upon retrieval, you should be able to delete it securely following this process.

Replace it by merging an empty jQuery tooltip on top?

In case you are utilizing jQuery, you have the option to implement the following:

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

(Note: This code snippet has not been tested)

Is it possible to iterate through all the links on the webpage and remove the title attribute?

let links = document.links;
for(let j=0; j<links.length; j++){
  links[j].title = "";
}

Here is a simple solution using jQuery:

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

Implementing David Thomas' suggestion, you can achieve a more sophisticated 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'))
});

Here is a handy jQuery solution that effectively removes the browser tooltip without losing the title attribute's functionality. You can easily customize the selector to fit your specific requirements.

/*
 * Efficient jQuery method for removing browser tooltips
 */
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'));
});

In response to a previous query, I recommend replacing the "title" attribute with "data-title" to ensure it can still be accessed by screen readers used by disabled individuals. As Lokin pointed out, it is important to prioritize the accessibility of the website for users with impairments and disabilities during development.