CODEWITHSUNDEEP
jquerymouseout
Brian7865
Brian7865

Reputation: 33

Add delay to jquery mouseleave tooltip hover

I’m trying to edit a WordPress plugin’s built-in tooltip functionality. Currently it disappears immediately on mouseleave. I just need it to stay put for a second or two.

I’ve read through plenty of similar questions but I can’t figure out where to add a timeout delay to the plugin’s existing code:

init_tooltip();
$(window).resize(init_tooltip);
target.data('is_moving', false);

var remove_tooltip = function () {
  if (target.data('is_moving')) {
    return;
  }

  tooltip.removeClass(fadin).addClass(fadeout);
  var speed = 15000;

  tooltip.animate({
    opacity: 0
  }, speed, function () {
    $(this).remove();
  });

  if (!tiphtml && !is_swatch && !is_swatch_desc && !is_swatch_lbl_desc && !is_swatch_img && !is_swatch_img_lbl && !is_swatch_img_desc && !is_swatch_img_lbl_desc) {
    target.attr('title', tip);
  }
};

target
  .on('tmmovetooltip', function () {
    target.data('is_moving', true);
    init_tooltip(1);
  })
  .on('mouseleave tmhidetooltip', remove_tooltip);

target.closest('label').on('mouseleave tmhidetooltip', remove_tooltip);

tooltip.on('click', remove_tooltip);

targets.closest('label').on('mouseenter tmshowtooltip', showtooltip);
targets.on('mouseenter tmshowtooltip', showtooltip);

return targets;

Upvotes: 3

Views: 321

Answers (1)

Our_Benefactors
Our_Benefactors

Reputation: 3539

EDIT: I've updated this answer with a best-guess to only get the tooltip delay to happen on mouse out. The gist of it is that you need two functions

You need to wrap the insides of the remove_tooltip function in a setTimeout() with your desired delay. Change the number at the end to change the amount of delay.

Replace your code with the following:

    init_tooltip();
    $(window).resize(init_tooltip);
    target.data('is_moving', false);

    var remove_tooltip = function () {
      removeTooltipCore();
    };

    var remove_tooltip_with_delay = function () {
      setTimeout( function () {
        removeTooltipCore();
    }, 1000); //1 second delay
};

function removeTooltipCore() {
    if (target.data('is_moving')) {
            return;
          }

          tooltip.removeClass(fadin).addClass(fadeout);
          var speed = 15000;

          tooltip.animate({
            opacity: 0
          }, speed, function () {
            $(this).remove();
          });

          if (!tiphtml && !is_swatch && !is_swatch_desc && !is_swatch_lbl_desc && !is_swatch_img && !is_swatch_img_lbl && !is_swatch_img_desc && !is_swatch_img_lbl_desc) {
            target.attr('title', tip);
          }
}

target
  .on('tmmovetooltip', function () {
    target.data('is_moving', true);
    init_tooltip(1);
  })
  .on('tmhidetooltip', remove_tooltip)
  .on('mouseleave', remove_tooltip_with_delay);

target.closest('label').on('tmhidetooltip', remove_tooltip);
target.closest('label').on('mouseleave', remove_tooltip_with_delay);

tooltip.on('click', remove_tooltip);

Upvotes: 1

Related Questions