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.

JFK · Accepted Answer · 2016-03-05T02:07:27.597

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.

Hey thanks so much. This makes perfect sense. Appreciate the insight! — Knowlton, Mar 10 '12 at 00:02
please don't forget to mark as the correct answer if you think that helped to solve your question. — JFK, Mar 10 '12 at 00:03
When making an image gallery, this doesnt't work after the first image is loaded. But using the beforeShow callback did the job. — e3matheus, Jun 15 '12 at 22:39
@e3matheus Most likely you are using v2.0.6 then. When I wrote the answer I guess the current version was v2.0.4 so `afterLoad` was working just fine. I will add an update to my answer. Thanks — JFK, Jun 16 '12 at 00:50

score 0 · Answer 2 · answered Mar 16 '15 at 16:36

I ended up using a hook in the functions.php file instead of javascript to set the title attribute of the <a> when each gallery image is retrieved:

function add_title_attachment_link($link, $id = null) {
    $id = intval( $id );
    $_post = get_post( $id );
    $post_title = esc_attr( $_post->post_excerpt );
    return str_replace('<a href', '<a title="'. $post_title .'" href', $link);
}
add_filter('wp_get_attachment_link', 'add_title_attachment_link', 10, 2);

This will return the caption from the attachment and add it to the <a> tag as a title for most JQuery lightbox plugins.

For example, in Fancybox:

$(".fancybox").fancybox({
    helpers : {
        title : {
            type : 'over'
        }
    }
});

The caption will now appear in the lightbox.

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

2 Answers2

Original answer:

Linked