9

我需要在我的 jQuery UI 工具提示上添加一个预延迟。我使用的是最新版本 (1.9)，并希望提示在悬停后 2 秒打开。

我使用以下方法调用标题中的提示：

<script>
    $(function() {
        $( document ).tooltip({ predelay:2000,});   
    });
</script>

但是当他们被解雇时，他们没有任何延迟......有什么帮助吗？

4

3 回答 3

23

用这个

$( "#elementid" ).tooltip({
  show: {
    effect: "slideDown",
    delay: 250
  }
});
于 2013-01-17T21:34:40.413 回答
4

我有同样的问题，但最终想出了这个解决方案：

var opendelay = 500;
var closedelay = 500;
var target = $('.selector');
target.tooltip({ /* ... */ });
target.off('mouseover mouseout');
target.on('mouseover', function(event) {
    event.stopImmediatePropagation();
    clearTimeout(target.data('closeTimeoutId'));
    target.data('openTimeoutId', setTimeout(function() { target.tooltip('open'); }, opendelay));
});
target.on('mouseout', function(event) {
    event.stopImmediatePropagation();
    clearTimeout(target.data('openTimeoutId'));
    target.data('closeTimeoutId', setTimeout(function() { target.tooltip('close'); }, closedelay));
});

本质上它的作用是：

  • 禁用工具提示的默认 onMouseOver 事件
  • 为使用 setTimeout() 延迟的工具提示添加一个新的 mouseOver 事件
  • 添加一个新的 mouseOut-event 取消超时（这可以防止工具提示显示，以防鼠标在延迟过去之前已经离开目标区域）
  • 奖励：它还使用相同的技术添加了类似于“opendelay”又名“predelay”的“closedelay”
  • event.stopImmediatePropagation();仅在某些情况下需要。例如。如果您希望工具提示元素在悬停 IT 时保持可见（打开后）。如果需要，请在工具提示上注册相同的悬停事件：target.tooltip({ open: function (event, ui) { ui.tooltip.hover(..., ...); } });
  • ps 你也可以链接其中的几个调用，比如onand off。
  • 可以用或替换target事件函数内部。但我不确定也没有尝试过；毕竟可能行不通。this$(this)
  • 如果您不需要 closeDelay，只需删除包含closeTimeoutIdor的行closedelay并删除mouseoutintarget.off('mouseover mouseout');或将其设置为 0
  • 如果您不需要 openDelay 也是如此……反之亦然
于 2013-08-06T17:53:05.563 回答
0

IE 有悬挂逗号的问题，也许尝试删除它并查看是否有帮助：

$( document ).tooltip({ delay:2000 });
于 2013-01-17T21:33:22.317 回答