Jquery UI工具提示。 设置超时并设置hover事件。 鼠标hover时冻结工具提示

我用谷歌搜索了大约2天，无法弄清楚如何为http://api.jqueryui.com/tooltip/设置超时？

也许我应该使用jquery hoverIntent？

这是我的代码

$('*[class*="help_"]').tooltip({ open: function(e,o){ $(o.tooltip).mouseover(function(e){ $('*[class*="help_"]').tooltip('open'); }); $(o.tooltip).mouseout(function(e){ }); }, close: function(e,o) {} }); 

Answer 1

我也寻找了一个类似的解决方案，正常显示工具提示，但是当鼠标hover在工具提示上时它应该保留（工具提示的内容是一些按钮）。

我不希望整个框架（qtip）做到这一点，我已经在我的网站上使用jqUI。

所以我这样做了：

 $( document ).tooltip({ show: null, // show immediately items: '.btn-box-share', hide: { effect: "", // fadeOut }, open: function( event, ui ) { ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" ); }, close: function( event, ui ) { ui.tooltip.hover( function () { $(this).stop(true).fadeTo(400, 1); //.fadeIn("slow"); // doesn't work because of stop() }, function () { $(this).fadeOut("400", function(){ $(this).remove(); }) } ); } }); 

Answer 2

我有一个很好的解决方案，受jQuery论坛post的启发：

 var mouseLeaveTimer; $('.selector').tooltip( open: function(){ // make sure all other tooltips are closed when opening a new one $('.selector').not(this).tooltip('close'); } }).on('mouseleave', function(e){ var that = this; // close the tooltip later (maybe ...) mouseLeaveTimer = setTimeout(function(){ $(that).tooltip('close'); }, 100); // prevent tooltip widget to close the tooltip now e.stopImmediatePropagation(); }); $(document).on('mouseenter', '.ui-tooltip', function(e){ // cancel tooltip closing on hover clearTimeout(mouseLeaveTimer); }); $(document).on('mouseleave', '.ui-tooltip', function(){ // make sure tooltip is closed when the mouse is gone $('.selector').tooltip('close'); }); 

[更新：Amit 添加了上述解决方案的要点和补救措施。]

Answer 3

我喜欢这个来设置超时：

  $(document).tooltip({ open: function(event, ui) { ui.tooltip.delay(5000).fadeTo(2000, 0); } }); 

Answer 4

试过这个？

 $( ".selector" ).tooltip({ show: { duration: 800 } }); 

链接： http ： //api.jqueryui.com/tooltip/#option-show

Answer 5

此版本可确保工具提示保持足够长的时间，以便用户将鼠标移到工具提示上并保持可见，直到鼠标移开。 方便允许用户从工具提示中选择一些文本。 部分代码来自Antonimo。

 $(document).on("click", ".tooltip", function() { $(this).tooltip( { items: ".tooltip", content: function(){ return $(this).data('description'); }, close: function( event, ui ) { var me = this; ui.tooltip.hover( function () { $(this).stop(true).fadeTo(400, 1); }, function () { $(this).fadeOut("400", function(){ $(this).remove(); }); } ); ui.tooltip.on("remove", function(){ $(me).tooltip("destroy"); }); }, } ); $(this).tooltip("open"); }); 

HTML

 Test 

示例： http ： //jsfiddle.net/A44EB/123/

Answer 6

来自@naveen的回复变体。 这有一个持续时间，但是jQuery UI缓动根本没有显示，直到过去一半的持续时间（在这种情况下为400毫秒400毫秒）。 如果用户没有将鼠标hover，则此function类似于hover意图，因为工具提示永远不可用。 解决问题的简单，优雅的方法。

 $( ".selector" ).tooltip({ show: { easing: "easeInExpo", duration: 800 } }); 

Answer 7

            
 
 link-1 
   
 link-2