Fancybox gallery for an element with a tooltip: why is the first title not showing?

Please, refer to this article as a reference how to create fancy tooltips for elements and to the Fancybox site to see how to configure it to display images and galleries.

The problem with the mentioned approach to create tooltips is that the "title" attribute gets reassigned and blanked out when we mouse over the element, but it could be used by other plugins such as Fancybox. Fancybox uses the "title" attribute to add a title to a zoomed in element. If this element also has a tooltip, then clicking on the element will result in the slide title not showing, since we didn't exit the element yet, and the "title" attribute value didn't get assigned back. If we have a gallery, then the titles are showing fine for the next elements since we didn't have the mouse over them.

We can fix this problem in a very simple way, force the mouse exit event once we click on the element. The "title" attribute is assigned back as the mouse leaves the element, as this way the problem will be fixed.

Fancybox has an onStart attribute where we can call this function.

(function ($) {
    
 $(function() {

  function closeTooltip() {
     $(".slide-content:visible a").trigger("mouseleave");
  }
  $(".slide-content a").fancybox({
     'transitionIn':'elastic',
     'transitionOut':'none',
     'speedIn':600,
     'speedOut':200,
     'overlayShow':true,
     'overlayColor':'#000',
     'cyclic':true,
     'easingIn':'easeInOutExpo',
     'margin':'10px',
     'onStart':function() {closeTooltip();}
    });
  });
}) (jQuery);    

"slide-content" is a wrapper for the slide (can be a different class name) and "a" is the link for the tooltip and the Fancybox element. Now the "title" attribute will get reassigned and the slide title will be showing fine.