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

将延迟添加到jQuery mouseleave工具提示悬停

1 个答案: