结合jquery cluetip和hoverintent？

我使用jquery的cluetip来显示，呵呵，工具提示:-) 我让它们变得粘稠，因为我希望用户能够将鼠标移动到显示的工具提示 - 如果他们愿意的话。但是，如果用户不将鼠标移动到工具提示，我希望工具提示在一段时间后消失。在我看来，这应该可以使用hoverintent-plugin。但是这个插件不会触发，除非用户将鼠标移到插件上一次。如果发生这种情况，cluetip会自行删除工具提示...结合jquery cluetip和hoverintent？

如何获取显示的工具提示，等待500毫秒，并且如果用户没有将鼠标悬停在工具提示上，则不会消失？

我一直在思考fireing与昂秀计时器，添加脚本到的onmouseover禁止定时器之类的东西的提示，但似乎过于复杂...

任何人有一个更好的主意吗？ :-)

感谢，

保罗

来源

2011-02-03 profke

您是否找到了解决此问题的解决方案？ Mayme你可以建议任何其他工具提示插件与这些功能？ – Serhiy 2011-06-22 10:52:42

我用this LIB一些自定义设置。您可以更换线77

$tooltipC.html($tooltip.data("title"));

this文件，下面一行：

$tooltipC.html(options.content);

而且比你可以按如下方式使用它：

$('.tooltip-target').each(function() { 
     $(this).tooltip({ 
      cssClass: "tooltip", 
      content: $($(this).attr("rel")).html() 
     }); 
    });

正如你可以在我的项目看对于每个工具提示目标，我使用tootlip的html控件的选择器来设置属性rel。具体如下：

<img src="help.ico" class="tooltip-target" rel="#helpTooltip" /> 
<div style="display:none" id="helpTooltip"> 
    Some html content for tooltip 
    <a href="help.html">Details..</a> 
</div>

来源

2011-06-22 17:23:48 Serhiy

我不知道支持的工具提示插件，所以你可能需要自己创造的东西。下面的例子工作，虽然使它通用，可重用和使用工具提示插件将需要更多的工作。

<a href="#" onclick="activateTip()">click here</a> 
<div id="tooltip" style="background: green; height: 30px; width: 50px; color: white; 
    display: none; position: absolute"> 
    fake tooltip 
</div> 
<script type="text/javascript"> 

    function activateTip() { 
     $("#tooltip").fadeIn(autoFade); 
    } 

    function autoFade() { 
     var cancel = setTimeout(hideTip, 3000); 
     $("#tooltip").mouseover(function() { 
      clearTimeout(cancel); 
      $("#tooltip").unbind("mouseover").mouseout(autoFade); 
     }); 
    } 

    function hideTip() { 
     $("#tooltip").fadeOut().unbind("mouseover").unbind("mouseout"); 
    } 

</script>

来源

2011-10-10 10:45:48 Trax72

这是'重新发明轮子'与任何其他cluetip功能 – 2011-10-13 22:14:18

您可以使用下面的方法来做到这一点。

JQuery的：

//Change it to your tooltip object- ID/Name/Class 
$("#tooltip").mouseout(function(){ 
    $(this).delay(500).queue(function() { 
    $(this).css('display', 'none'); 
    }); 
//We use this method because, user can come over the element before its disapper. 
}).mouseover(function() { 
    if($(this).is(':visible')) 
    $(this).css('display', ''); 
});

来源

2011-10-13 10:17:34 Racooon

的问题是，如果有可能 “合并的jQuery cluetip和hoverintent？”。简单的答案是：是的。

只需下载并在页面上包含HoverIntent脚本。该脚本（+例子），可以发现：http://cherne.net/brian/resources/jquery.hoverIntent.html

当你已经包括HoverIntent，您可以设置一些额外的选项你的“ClueTip”：

$basketTooltips.cluetip({ 
    attribute:  'rel', 

     // other options   

    // HoverIntent specific options 
    hoverIntent: { 
     sensitivity: 3, 
     interval:  100, 
     timeout:  500 
    }, 

});

的cluetip HoverIntent选项等于原始HoverIntent选项，找到在：http://cherne.net/brian/resources/jquery.hoverIntent.html

来源

2013-03-27 14:26:51 NickGreen

结合jquery cluetip和hoverintent？

回答

相关问题