Is it possible to hide title when hovering image?

Question

This is my code:

<img src="image.jpg" alt="" title="some title" />

When I hover that image "some title" appears. Is it possible to be hidden?

Answer 1

It can be easily done as some answers point out, but knowing what you want to do with title, I would use a data-* custom attribute or attach the title with .data()

<img src="image.jpg" alt="" data-title="some title" />

or

$('img').data('title', 'some title');

Answer 2

It's simple enough to remove the title attribute, but 'hiding it' is not possible (so far as I'm aware); in order to remove the title the following should work, though currently untested:

$('img').hover(
    function(){
        $(this).data('originalTitle',$(this).title());
        $(this).removeAttr('title');
    },
    function(){
        $(this).attr('title',$(this).data('originalTitle');
    });

In the above I've chosen to move the attribute, and then replace it on mouse-out.

To remove the title permanently:

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

References:

• attr() .
• data() .
• hover() .
• removeAttr() .

Answer 3

You can move it to image data... and back. Like that

$('img').hover(
  function () {
    $(this).data('title',$(this).attr('title')).removeAttr('title');
  }, 
  function () {
    $(this).attr('title',$(this).data('title'));
  }
);

Answer 4

If it's just a question of hover, you can make pointer-events: none; on image, and it will fix the issue.

Answer 5

Yes! with jQuery you can remove it on mouseover and add it again onmouseout -

$(function(){
  var ttext;
  $('img').hover(function(){
    ttext = $(this).attr('title');
    $(this).removeAttr('title');
  },
  function(){
    $(this).attr('title', ttext);
  });
});

Answer 6

No, not really. But you could replace it with JavaScript, or just leave it blank.

jQuery example:

$('[title]').removeAttr('title');

Answer 7

Kind of hilarious that on Stack Overflow, five people can give the same answer at the same time :P

$(function(){
    $('img').hover(function(){
        $(this).removeAttr('title');
    }, function(){
        $(this).attr('title','some title');
    });
});

Answer 8

Something I tried and worked with jQuery / jQuery UI on Chrome at least:

1. Create the object you want (and don't want) to have a title.
2. Once all these items exist, add a tooltip.
3. Go through all items you don't want the tooltip displaying the usual way, and set the tooltip to '' .

Example from my code, occuring after named HTML elements are available:

jQuery(document).tooltip();
for(var index = 0; index < sites.length; ++index) {
    jQuery('#' + sites[index][0]).attr('title', '');
}