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?

Wouldn't you prefer removing it? If you don't wanna show it on hover, when do you use the title? — davids, Jun 29 '12 at 07:22
Have you tried something? Do you want to permanently remove the title? — Tamil, Jun 29 '12 at 07:22
I use jQuery to get title from image and display it on image. I don't need it on hover then. — Atadj, Jun 29 '12 at 07:23
why do you want to do that? title is made for that purpose, if you want to add a custom attribute to the tag write something like data-title="some title" or use the alt attribute — Carlo Moretti, Jun 29 '12 at 07:23
i think you can easily find this here .... http://stackoverflow.com/questions/1322839/is-it-possible-to-hide-href-title — Hardik, Jun 29 '12 at 07:25
@Onheiron I think I'll go with your solution (data-title instead of title) although there are 5 good answers here :) Thanks! — Atadj, Jun 29 '12 at 07:30

score 6 · Accepted Answer · answered Jun 29 '12 at 07:29

6

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

answered Jun 29 '12 at 07:29

davids

6,259
3
29
50

Yes, I'll go with this solution as it fits my needs the most, although each answer to this question is equally good :) I just think it would make more sense to move it to data-title instead of hiding original title="" on hover. Thanks! – Atadj Jun 29 '12 at 07:32

score 5 · Answer 2 · answered Dec 19 '19 at 11:02

5

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

answered Dec 19 '19 at 11:02

Glance

91
1
2

score 4 · Answer 3 · answered Jun 29 '12 at 07:22

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:

Thank you for your solution. It obviously works and I could use it but I think I'll go with data-title="" instead as one of the other answers suggests. It just makes more sense in my case because I'm printing title tag on top of image using jQuery. — Atadj, Jun 29 '12 at 07:34

score 3 · Answer 4 · answered Jun 29 '12 at 07:23

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

answered Jun 29 '12 at 07:23

Sergei Zahharenko

1,514
12
16

Thank you for your solution! It obviously works but I decided to go with data-title attribute instead. Other answers convinced me that it's better method in my case. – Atadj Jun 29 '12 at 07:36

score 1 · Answer 5 · answered Jun 29 '12 at 07:23

1

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

answered Jun 29 '12 at 07:23

Dipak

11,930
1
30
31

1

Thank you for your solution! It obviously works but I decided to go with data-title attribute instead. Other answers convinced me that it's better method in my case. – Atadj Jun 29 '12 at 07:36

score 0 · Answer 6 · answered Jun 29 '12 at 07:22

0

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

jQuery example:

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

answered Jun 29 '12 at 07:22

Simone

20,302
14
79
103

score 0 · Answer 7 · answered Jun 29 '12 at 07:23

0

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

answered Jun 29 '12 at 07:23

Jezen Thomas

13,619
6
53
91

1

Yes, I just posted the question and 5 answers appeared at the same time two minutes later :) Each one is alike. – Atadj Jun 29 '12 at 07:28

score 0 · Answer 8 · edited Feb 06 '16 at 17:34

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

Create the object you want (and don't want) to have a title.
Once all these items exist, add a tooltip.
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', '');
}

Is it possible to hide title when hovering image?

8 Answers8

Linked

Related