Question

I had tried looking up on here many different answers to this question and tried using their solutions, but it didn’t seem to work, such as this solution:
Is it possible to hide href title?

My question is how am I able to hide the title attribute tooltip when the user mouses over the picture? I tried using the <span title=" ">text</span> but it only caused the title tooltip to show the space or the span’s title attribute.

Here is my website.

Answer 1

I figured out the answer to my question. Thank you Gert G for getting me started! =]

What I did in order to hide the title attribute, was first to put everything into a loop because otherwise, it will take the first link’s title and apply it to the picture clicked on:

$("a[rel='portfolio']").each(function(e) {

}

Then, I declared a variable that contains the title to whatever elements you want them applied to:

var title = $(this).attr("title");

Once I declared the variable, I then created a function that hides the title when it’s moused over, then adds the title back on when I mouseout on it (for the purpose of having my lightbox, ColorBox).

$(this).mouseover(
        function() {
            $(this).attr('title','');
        }).mouseout(
            function() {
            $(this).attr('title', title);
    });

In order for the title to be viewed when click on, you have to add another function:

$(this).click(
        function() {
            $(this).attr('title', title);
            }
        );

Putting it all together, it looks like this:

$("a[rel='portfolio']").each(function(e) {
    var title = $(this).attr('title');
    $(this).mouseover(
        function() {
            $(this).attr('title','');
        }).mouseout(
            function() {
            $(this).attr('title', title);
    });
    $(this).click(
    function() {
        $(this).attr('title', title);
        }
    );
});

I hope this helps everyone else looking for a similar or this exact solution!

You can check out the changes here.