Hide title attribute on hover, but don’t remove

A client of ours uses PrettyPhoto to show galleries of artwork and they recently requested that we change up the way in which the artwork meta information were displayed. This required that the data be moved to the title attribute of the link, which worked surprisingly well. It unfortunately also added an illegible, undesirable, and distracting title when the thumbnails were hovered over for too long.

This title hover is standard browser behavior and there appears to be no way to turn it off. Googling around landed me many ideas on how to simply remove the title:

$(this).removeAttr('title');

This removes the title all together which isn’t what we want. This thread on Stackexchange is very close: http://stackoverflow.com/a/3886050/1655274, removing the title on hover, then adding it back on mouseout. This didn’t work either because the user never actually leaves the image before clicking to view it. Here’s my modified version of that code to replace the title on click:

There is most certainly a cleaner way to write this, but it works.

1 Comment


and this ?
$( \”a\” ).hover(
function() {

// Get the current title
var title = $(this).attr(\"title\");

    // Store it in a temporary attribute
    $(this).attr(\"tmp_title\", title);

    // Set the title to nothing so we don\'t see the tooltips
    $(this).attr(\"title\",\"\");
 }, function() {
    // Retrieve the title from the temporary attribute
    var title = $(this).attr(\"tmp_title\");

    // Return the title to what it was
    $(this).attr(\"title\", title);
 }

);

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Check out our Complete Website Package

Chat with us about your project or click below to find out more!

Learn More   Chat with us

Hi. We are Spigot. Telemarketers pronounce it Spy-got.

We are a Park City, Utah based web design shop that excels at building custom websites powered by WordPress and WooCommerce. We love content - content strategy, content curation, content soup...????Have a look around the site. As you browse you'll find useful navigation links in the sidebar on the left. We hope you find them useful anyway... Please let us know what you think, shoot us a message here.