为 jquery mouseleave 工具提示悬停添加延迟
Add delay to jquery mouseleave tooltip hover
我正在尝试编辑 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;
编辑:我已经用最佳猜测更新了这个答案,只让工具提示延迟发生在鼠标移出时。它的要点是你需要两个函数
您需要将 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);
我正在尝试编辑 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;
编辑:我已经用最佳猜测更新了这个答案,只让工具提示延迟发生在鼠标移出时。它的要点是你需要两个函数
您需要将 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);