Remove image title when mouse hover on the image

Question

I am using lytebox for my image gallery. It works great except when a user hovers on images, there will be texts with html tags shown on the browser.

ex:

<h1>This is the first image </h1>
<p>The image desc<p>

I need the title attribute for my image gallery but don't want it to show when the user hovesr the image. Is that possible? Thanks for the help.

you can hide the the hover effect using css but for title you might need to change jquery. — Dips, Jun 05 '12 at 01:59

score 4 · Accepted Answer · answered Jun 05 '12 at 02:12

4

var imgTitle;

$("img").hover(function(){
    imgTitle = $(this).attr("title");
    $(this).removeAttr("title");
}, function(){
   $(this).attr("title", imgTitle);
});

answered Jun 05 '12 at 02:12

ahren

16,803
5
50
70

I think you beat me by 2 seconds. +1 for that. – lucuma Jun 05 '12 at 02:14

score 2 · Answer 2 · answered Jun 05 '12 at 02:12

I think you'd have to do something like:

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

Demo: http://jsfiddle.net/lucuma/cX5MD/

You won't see the title on the img's but if you inspect them you'll see they are still there.

You could also use jQuery removeAttr and attr instead of setting it to empty string.

ty for the jsfiddle example +1. :) – FlyingCat Jun 05 '12 at 02:24 — FlyingCat, Jun 05 '12 at 02:24

score 0 · Answer 3 · answered Feb 10 '19 at 19:55

0

Very simple like this

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

answered Feb 10 '19 at 19:55

Firefog

3,094
7
48
86

Remove image title when mouse hover on the image

3 Answers3