javascript - 无法点击使用 "Show a popup when hovering over a link or button"后出现的框中的任何内容

Question

我无法点击使用“将鼠标悬停在链接或按钮上时显示弹出窗口”后弹出的内容。

我链接到我正在使用的代码:http://jsfiddle.net/8UkHn/

请通过建议使用相同代码或新代码进行编辑来帮助我。

谢谢。

$("a").hover(function(e) {
    $($(this).data("tooltip")).css({
        left: e.pageX + 1,
        top: e.pageY + 1
    }).stop().show(100);
}, function() {
    $($(this).data("tooltip")).hide();
});

div {
    position: absolute;
    display: none;
    background: #ccc;
    border: 1px solid;
}

<a href="http://foo.com" data-tooltip="#foo">foo</a>
<br><br>
<a href="http://bar.com" data-tooltip="#bar">bar</a>

<div id="foo">
    
    foo means foo
    <a href="">Anyhing can go here!
          </a>
</div>
<div id="bar">bar means bar</div>

Answer 1

当你的鼠标移出<a>标签，与之关联的工具提示会立即隐藏。因此，您将无法单击工具提示中的任何内容。

解决方案是只要鼠标在您的 <a> 中就保持工具提示打开。或其相关的工具提示。

查看演示:http://jsfiddle.net/8UkHn/2108/

代码:

$("a").hover(function(e) {
    $($(this).data("tooltip")).css({
        left: e.pageX + 1,
        top: e.pageY + 1
    }).stop().show(100);

    // clear any timer started for hiding the tooltip
    if($(this).data("hidetimer")) {
        clearTimeout($(this).data("hidetimer"));
        $(this).data("hidetimer", 0);
    }

}, function() {

    // start a timer for hiding the tooltip
    // after 500ms so as to give the user time to move his 
    // mouse over to the tooltip
    var tooltip = $($(this).data("tooltip"));
    $(this).data("hidetimer", setTimeout(function() {
        tooltip.hide();
    }, 500));

});

$('[data-tooltip]').each(function() {
    var self = $(this), tooltip = $(self.data("tooltip"));

    // similar show/hide logic for when the mouse enters/leaves the tooltip
    tooltip.hover(function() {
        if(self.data("hidetimer")) {
            clearTimeout(self.data("hidetimer"));
            self.data("hidetimer", 0);
        }
    }, function() {
        self.data("hidetimer", setTimeout(function() {
            tooltip.hide();
        }, 500));
    });
});