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.

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.

• javascript
• jquery
• html
• css
• lytebox

• can u post it on jsfiddle or demo on your site? – Dips Commented Jun 5, 2012 at 1:57
• you can hide the the hover effect using css but for title you might need to change jquery. – Dips Commented Jun 5, 2012 at 1:59
• why don't you just use alt tag instead of title then? – Nikola Bogdanović Commented Jun 5, 2012 at 2:00

3 Answers 3

var imgTitle;

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

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

Very simple like this

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