5

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

如何让工具提示显示，等待 500 毫秒，如果用户没有将鼠标悬停在工具提示上，然后消失？

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

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

谢谢，

保罗

4

4 回答 4

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>
于 2011-10-10T10:45:48.153 回答
0

我使用这个库进行了一些自定义。您可以替换第 77 行 

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

该文件的内容如下：

$tooltipC.html(options.content);

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

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

正如您在我的项目中看到的，我为每个工具提示目标设置了属性 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>
于 2011-06-22T17:23:48.623 回答
0

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

查询：

//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-13T10:17:34.293 回答
0

问题是是否可以“结合 jquery 线索提示和悬停意图？”。简单的回答是：是的。

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

});

线索提示 HoverIntent 选项等于原始 HoverIntent 选项，位于：http ://cherne.net/brian/resources/jquery.hoverIntent.html

于 2013-03-27T14:26:51.193 回答