结合jquery cluetip和hoverintent？

我使用jquery的cluetip来显示工具提示：-） 我将它们设置为粘滞，因为我希望用户能够将鼠标移动到显示的工具提示上——如果他们愿意的话。但是，如果用户不将鼠标移动到工具提示，我希望工具提示在一段时间后消失。在我看来，使用hoverintent插件应该可以做到这一点。但是，除非用户将鼠标移到插件上一次，否则该插件不会启动。如果发生这种情况，cluetip会自动删除工具提示

我如何才能获得要显示的工具提示，等待500毫秒，如果用户没有将鼠标悬停在工具提示上，则工具提示将消失

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

有人有更好的主意吗？：-）

谢谢

Paul

我使用lib进行一些定制。您可以替换第77行

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

具有以下行的文件类型：

$tooltipC.html(options.content);

然后，您可以按如下方式使用它：

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

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

正如您在我的项目中看到的，对于每个工具提示目标，我使用html控件选择器为tootlip设置了属性rel。详情如下:

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

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

工具提示的一些html内容

我不知道有哪个工具提示插件支持这个功能，所以你可能需要自己创建一些东西。下面的示例是有效的，尽管要使其通用、可重用并使用工具提示插件需要做更多的工作

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

假工具提示
函数activateTip（）{
$（“#工具提示”）.fadeIn（自动淡入）；
}
函数autoFade（）{
var cancel=setTimeout（hideTip，3000）；
$（“#工具提示”）.mouseover（函数（）{
清除超时（取消）；
$（“#工具提示”）.unbind（“mouseover”）.mouseout（自动淡入淡出）；
});
}
函数hideTip（）{
$（“#工具提示”）.fadeOut（）.unbind（“mouseover”）.unbind（“mouseout”）；
}

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

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

---

问题是是否可以“将jQueryCluetip和hoverintent结合起来？”。 简单的答案是：是的

只需下载并在页面上包含HoverIntent脚本。脚本（+示例）可在以下位置找到：

包含HoverIntent后，可以为“ClueTip”设置一些附加选项：

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

        // other options        

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

});

---

cluetip HoverIntent选项与原始HoverIntent选项相同，位于：

您找到解决此问题的方法了吗？也许你可以推荐任何其他具有这些功能的工具提示插件？这是对任何其他cluetip功能的“重新发明轮子”。这只是一个演示如何实现这一点的示例，我不确定这在cluetip中是否可行。