Hide title attribute on hover, but don’t remove

Bryan Hoffman• March 17, 2014

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:

$(".element").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","");
        
    });

  $(".element").click(function(){// Fired when we leave the element

        // Retrieve the title from the temporary attribute
        var title = $(this).attr("tmp_title");

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

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

Posted:
Tagged: , ,

13 Comments

  1. Emil on July 5, 2016 at 9:33 am

    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
  2. Ryan Hall on March 6, 2019 at 2:22 pm

    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.

    Reply
  3. Michael T. on June 21, 2019 at 3:54 pm

    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.

    Reply
    • Bryan Hoffman on June 24, 2019 at 11:29 am

      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.

      Reply
  4. Myhindipoint on July 10, 2019 at 12:03 am

    Nice

    Reply
  5. Ayush Mandowara on February 11, 2020 at 4:24 am

    Thanks, just what I was looking for!
    I was facing an issue where I needed to disable the tooltip, but removing the title attribute ended up changing the functionality of the button, it was no longer sending data. Apparently

    Reply
  6. Julia on April 22, 2020 at 2:49 am

    Hi! Many thanks for the code! I’m trying to use it but I don’t know exactly which elements of the code I have to replace to adjust it to my site. Do I have to put the class of the image on “.element” ? Do I have to change something else? Sorry for beeing such a Dummie and thanks again!

    Reply
    • Bryan Hoffman on April 22, 2020 at 9:49 am

      Hi Julia. You can change .element to which ever target you need. Adding a class to the image using this script should also do it though, yes.

      Reply
  7. Kris on November 22, 2020 at 3:24 pm

    Why is it necessary to store the title attribute in a temporary attribute? Why can’t you just store it in the title variable and then load it back in to the title attribute from that?

    Reply
    • Bryan Hoffman on November 25, 2020 at 9:49 am

      Hi Kris. I’ve done it this way because I needed the title to be blank while hovering, but like I mentioned in the article, maybe you’ve found a cleaner way.

      Reply
      • Kris on November 25, 2020 at 9:50 am

        Well, it seemed like an unnecessary step, but when I removed that step, it didn’t work, and I’m not sure why.

        Reply
      • Bryan Hoffman on November 25, 2020 at 10:00 am

        With that method, I’m guessing the title attribute disappears on hover, but is never returned to the original title on exit, because it’s been overwritten. This is why I saved it in a temporary var.

        Reply

Leave a Comment