Is it possible to hide title when hovering image?

Question

This is my code:

When I hover that image \"some title\" appears. Is it possib

Answer 1

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 2

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

Answer 3

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

jQuery example:

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

Answer 4

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 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

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', '');
}