0

Hi I´m new to this one so please be patient :)

I want the title attribute to be unseen while hover over the image, this image is part of a image-gallery so while clicking on the image and getting the "popup" the title attribute has to be restored for showing the informations.

I manage to stop the hovering with <pre>onmouseover="this.title='';"</pre>, but if I click the image the title attribute content don´t show in the "popup". Here is a link to the site: http://lieblingskuchen-potsdam.de/lieblingskuchen-tartes.html

I have absolutly no idea how to manage this.

Thanks for your help.

Anja

PS: Sorry I didn't manage to post the part of the html code here (sorry I´m new)

2 Answers 2

0
this.title=''  //it clear the title value

Because you're clearing the value in title attribute. So instead store your title in other variable like custom data-* attribute. So when you click you can make use of it.

Here is a short example:

HTML:

<p title="CLICK" data-att=''>asasas</p>

JS:

$('p').on('hover', function () {
    $(this).data('att', this.title)
    this.title = '';
});

$('p').on('click', function () {
    this.title = $(this).data('att');
alert(this.title);    
});

JSFIDDLE

3
  • Thx for your answer, maybe you can give me an example? Do i have to use a function for this?
    – ahenjotah
    Dec 21, 2013 at 10:19
  • @ahenjotah I have added an example, hope you understood.
    – Praveen
    Dec 21, 2013 at 10:28
  • Hi Praveen thx for your example.. i´ve put the js to the beginning of the body and added the data-att='' to the first image. but somehow it doesn´t work.. am i right that i have to add some kind of "anchor" to the function in my image/a code?
    – ahenjotah
    Dec 21, 2013 at 10:50
0

I used this in Fancybox which ABuses the 'title' attribute of a link under the thumbnail for the title under the popped up large picture. In the $(document).ready() event I put:

// Workaround on stupid Fancybox 'feature' that the 'title' attribute is abused for text under picture,
// so links make hover title look like rubbish.
// http://stackoverflow.com/questions/20717849/hide-title-attribute-on-mouseover-but-show-onclick-imagegallery

$('div.center').on('hover', function () {
  var title = $(this).find('a.viewimage').attr('title');
  if (!$(this).data('att') && title) {
     $(this).data('att', title);  // set original title in data
     $(this).find('a.viewimage').attr('title',title.replace(/<\/?[^>]+(>|$)/g, "")); // set hover title stripped from tags
console.log($(this).find('a.viewimage').attr('title'));    
  }
});

$('div.center').on('click', function () {
     $(this).find('a.viewimage').attr('title',$(this).data('att'));  // restore original title with tags
     $(this).data('att', ''); // clear title in data
console.log(this.title);    
});

There is still one glitch: when clicking right or left (browsing through the large images), images hovered on previously show the html tag stripped titles, as the thumbnails are not clicked on.

See my example on my astrophoto website:

http://skysurfer.eu/skypics1.php

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.