Hide HTML Title Tooltip when hovering an Anchor (<a>) element

Great looking images and design can be thrown off when annoying title tag tooltips show when hovering links. Some people set empty title tags to resolve the problem but if you do that, you are hurting your SEO. So, why not throw in a few lines of jQuery and set when the link is hoverd, set the title to empty so there is no tooltip. When the link is no longer being hovered, throw the title back in there. The important part is that your markup will contain title tags for search bots.

Here is the code. Put it in your document.ready or page load event that you are using.

var title = '';
// hide title in top nav and home featured raphics when hovering so it doesnt look tacky
// replace when hover leaves
$('.main-nav ul li a, .home-featured a').hover(
	function () {			
		title = $(this).attr('title');
		$(this).attr({'title':''});
	}, 
	function () {
		$(this).attr({'title':title});
	}
);