结合jquery cluetip和hoverintent？

Question

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

如何显示工具提示，等待500毫秒，如果用户没有鼠标悬停工具提示，则消失？

我一直在考虑使用onShow触发计时器，在工具提示中添加一个脚本，onmouseover禁用计时器和类似的东西，但这似乎过于复杂......

有人有更好的主意吗？ :-)

谢谢，

保罗

Answer 1

我不知道支持它的工具提示插件，所以你可能必须自己创建一些东西。 以下示例有效，虽然使其通用，可重用并使用工具提示插件将需要更多工作。

<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>

Answer 2

问题是，是否可以“结合jquery cluetip和hoverintent？”。 简单的anwser是：是的。

只需下载并在页面上包含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

Answer 3

我使用这个 lib与一些自定义。 您可以替换第77行

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

此文件的行如下：

$tooltipC.html(options.content);

而且你可以使用它如下：

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

正如您在我的项目中可以看到的每个工具提示目标一样，我使用带有html for tolip的控件选择器设置属性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>

Answer 4

您可以使用以下方法执行此操作。

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', '');
});