Добавить задержку для всплывающей подсказки jquery mouseleave - PullRequest
Новая
       24

Добавить задержку для всплывающей подсказки jquery mouseleave

0 голосов
/ 08 февраля 2019

Я пытаюсь отредактировать встроенную подсказку в плагине 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;

1 Ответ

0 голосов
/ 08 февраля 2019

РЕДАКТИРОВАТЬ: я обновил этот ответ с наилучшим предположением, чтобы получить только задержка всплывающей подсказки, которая произойдет при выходе мышиСуть в том, что вам нужны две функции

. Вам нужно обернуть внутреннюю часть функции 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);
...