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

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