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.
6 Comments
and this ?
$( \”a\” ).hover(
function() {
// Get the current titlevar title = $(this).attr(\"title\");
);
This was a much needed workaround, and really smooth.
I changed it to be on(mouseover) and on (mouseleave) to fire the functions.
Well done.
Glad you found it useful Ryan. Cheers!
Can I ask how you implement this? Is this placed in the PrettyBox java script or is there a way to run it from the short code? I’ve been pounding my head over this problem for days now.
If you can, add the JS to the theme files. If you’re not able to do that, you’d need to add it using an ‘additional javascript’ plugin. I haven’t used these before so I can’t recommend any one in particular. Reach out on our chat system if you want more help, I’ll see what I can do.
Nice