为 jquery mouseleave 工具提示悬停添加延迟

Question

我正在尝试编辑 WordPress 插件的内置工具提示功能。目前它在mouseleave 上立即消失。我只需要它保持一两秒钟。

我已经阅读了大量类似的问题，但我不知道在哪里为插件的现有代码添加超时延迟：

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;

Answer 1

编辑：我已经用最好的猜测更新了这个答案，只在鼠标移出时才会出现工具提示延迟。它的要点是你需要两个函数

您需要将 remove_tooltip 函数的内部包装在 setTimeout() 中，并具有所需的延迟。更改末尾的数字以更改延迟量。

将您的代码替换为以下内容：

    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);