Hiding anchor tooltips on hover

Samuel Huckins — Sun, 29 Nov 2009 18:25:48 +0000

Navigation menus on websites most often consist of a list of links. When looking through a menu, it’s not unreasonable for a visitor to have their mouse cursor over some of the menu item links for a few moments as they read through the options. Using an unadorned anchor tag in this situation has a troublesome side effect:

The title attribute of the anchor tag will appear as a tooltip, potentially obscuring menu items and minimally being a useless distraction. But removing titles from navigation links isn’t a good option, since this attribute is helpful for SEO and accessibility purposes.

When discussing this problem with friend Google, I ran across many examples of how to change the display of anchor tooltips, as well as how to hide them altogether. But what I wanted was removal of the title attribute on navigation links only when the mouse cursor hovered over them, adding it back when the cursor left. The solution I settled on consisted of jQuery’s handy hover function and some basic JavaScript. hover() allows you to specify a function to call when the cursor hovers onto an object and another to call when the cursor hovers off. Perfect! Here’s a simple example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<html>
<head>
<title>A test</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// All links in main menu div
var menu_links = $('div[id=main-menu] a');
// On mouse hover
menu_links.hover(
// In: Store and remove title
function() {
old_title = $(this).attr('title');
$(this).attr('title','');
},
// Out: Replace title
function() {
$(this).attr('title', old_title);
}
);
});
</script>

</head>
<body>
<div id="main-menu">
<ul>
<li><a title="Titles are great for SEO and accessibility but don’t need to be seen by users normally!" href="zenoss.com">MenuItem1</a></li>
<li><a title="Titles are great for SEO and accessibility but don’t need to be seen by users normally!" href="zenoss.com">MenuItem2</a></li>
<li><a title="Titles are great for SEO and accessibility but don’t need to be seen by users normally!" href="zenoss.com">MenuItem3</a></li>
</ul>
</div>

<p>I am text! Hurray! <a title="bodylink1" target="_blank" href="zenoss.com">I am a normal link.</a></p>
</body>
</html>

You can verify the functionality by inspecting one of the MenuItem links with Firebug and watching the title attribute as you move the cursor on and off the same link.

After the page is finished loading, when a cursor hovers onto any links within the div of id “main-menu” the title attribute is stored and set to an empty string (so no tooltip). When the cursor leaves, the title attribute is set back to its original value. Simple but effective!

tail -f findings.out » JavaScript

Hiding anchor tooltips on hover