How do I hide the tooltip on hover from the title tag when using FancyBox 2.0?

Question

I'm using the new version of FancyBox 2.0. Here's a demo of the development site: http://ab.basikgroup.com/exhibition_works/61

Following that documentation I'm passing caption information for my lightbox via the Title attribute in my link tag. My caption information is quite long and has some HTML in it. So I want to hide the default tooltip from showing it when a user rolls over the image.

I've found some great examples of how to do this. For example: Remove title tag tooltip

My problem is that when I use this method (which is removing the title attribute on hover then replacing it when you aren't hovering over the link), but if you actually click on the image to load the lightbox, the title doesn't get passed into FancyBox. I tried writing a JQuery function that tested hover and click but couldn't get it to work.

Any advice or help would be greatly appreciated.

Answer 1

Update [March 04, 2016]

This is an old post and the accepted answer was valid for the version at that time. With the current version (v2.1.5) a cleaner solution without needing any extra HTML container, neither the use of callbacks would be using the special data-fancybox-title in your anchor like:

<a data-fancybox-title="This title doesn't show on hover" class="fancybox" href="path/img01.jpg">open image in fancybox</a>

And then use a simple fancybox initialization, no callbacks required for this effect like:

$(".fancybox").fancybox();

See JSFIDDLE

You could even use HTML tags inside the attribute like:

<a rel="gallery" data-fancybox-title="This is <span style='color:#ff0000'>title</span> No. 1" class="fancybox" href="path/img01.jpg">open image</a>

See updated JSFIDDLE

---

Original answer:

An elegant way to do it is to store the title to be used by fancybox somewhere else rather than the title attribute ... in a hidden div for instance just right after the anchor like:

<a class="fancybox" href="images/01.jpg" title="only show this on hover"><img src="images/01t.jpg"  /></a>
<div class="newTitle" style="display: none;"><p>hello, visite my site <a href="http://fancyapps.com/fancybox/">http://fancyapps.com/fancybox/</a></p></div>

In this way, you may have (or not at all) a different tooltip than the fancybox title. Also you forget about the extra javascript of adding or removing back and forth the value of the title attribute (you only would be adding CPU load instead).

This is also useful for long or complex captions that include links as in the example above.

Then your fancybox script should look like:

$(document).ready(function() {
 $(".fancybox").fancybox({
  afterLoad: function(){
   this.title = $(this.element).next('.newTitle').html();
  },
  helpers: {
   title : {
    type : 'inside'
   }
  }
 }); // fancybox
}); // ready

NOTE: the only condition is that the div with the title should follow every anchor, otherwise the .next() method will fail. You may customize the script though to get the caption from elsewhere in your code regardless if it is right after or not the anchor, getting the caption ID for instance:

this.title = $('#myCaption').html();

UPDATE (15 June 2012): If using v2.0.6+ you should use beforeShow instead of afterLoad callback option.