I am working with a new installation of WP in the local host. After installing an image gallery plugin a tooltip showing the image name appears when hovering on the image. I would like hide the tooltip when hovering but not remove it all together. Removing it canceles the tooltip but also removes the image title from the lightbox display.

Does the following approach make sense to solve the problem? - on image hover remove anchor title attribute, (cancels tooltip) - on image click restore anchor title attribute, (restores original image title in lightbox) - on mouseout restore image anchor attribute, (restores original image title )

Can someone help me modify the snippet to execute the steps listed.

jQuery(document).ready(function($) {
    $('a[title]').each(function() { $(this).removeAttr('title'); });
});

Environment: - WP 4.9.8 - Astra WP theme - Final Tiles Gallery plugin - Google Chrome 69 browser - OSX High Sierra

I am working with a new installation of WP in the local host. After installing an image gallery plugin a tooltip showing the image name appears when hovering on the image. I would like hide the tooltip when hovering but not remove it all together. Removing it canceles the tooltip but also removes the image title from the lightbox display.

Does the following approach make sense to solve the problem? - on image hover remove anchor title attribute, (cancels tooltip) - on image click restore anchor title attribute, (restores original image title in lightbox) - on mouseout restore image anchor attribute, (restores original image title )

Can someone help me modify the snippet to execute the steps listed.

jQuery(document).ready(function($) {
    $('a[title]').each(function() { $(this).removeAttr('title'); });
});

Environment: - WP 4.9.8 - Astra WP theme - Final Tiles Gallery plugin - Google Chrome 69 browser - OSX High Sierra

• plugins

1 Answer 1

This code snippet is almost working. on mouseenter title attribute is hidden on mouseleave title attribute restores on click title attribute restores on lightbox overlay exit it fails

When the lightbox closes it fails to restore the title attribute. Clicking a second time on the image does restore the image title. What is missing in the code snippet to be able to restore the anchor title attribute when the lightbox overlay closes?

jQuery(document).ready(function($) {
  $('a[title]').on('mouseenter', function () {
     var $this = $(this);
     $this.attr('title-cache', $this.attr('title'));
     $this.attr('title', '');
  });

  $('a[title]').on('mouseleave', function () {
     var $this = $(this);
     $this.attr('title', $this.attr('title-cache'));
     $this.attr('title-cache', '');
  });

  $('a[title]').on('click', function () {
     var $this = $(this);
     $this.attr('title', $this.attr('title-cache'));
     $this.attr('title-cache', '');
  });

  $('#lightboxOverlay').on('close', function () {
     var $this = $(this);
     $this.attr('title', $this.attr('title-cache'));
     $this.attr('title-cache', '');
  });
});