jQuery 工具提示和鼠标悬停集成

Question

我正在为一家建筑公司绘制 MIT 项目地图，并试图弄清楚当鼠标移到弹出的相关工具提示上时如何保持红点鼠标悬停状态。现在，当鼠标移动到工具提示时，鼠标悬停会关闭。

此外，当单击工具提示中的点或链接时，我需要清除并关闭工具提示。我注意到在 iPad 上单击指向项目页面的工具提示链接，然后使用返回按钮返回地图页面后，由于某种原因，最后一个工具提示保持打开状态。在台式机上似乎不是问题，但在移动设备上，我需要在他们点击后退按钮时将其清除。

这是我所指的网站：http://www.digitour360.com/mit/，样式表在这里：http://www.digitour360.com/mit/css/stylesheet.css

下面是每个按钮的圆形精灵的 css 代码 - 我试图以某种方式将这些与每个工具提示联系起来。例如，如果鼠标移动到红色圆圈按钮 11 上，然后移动到按钮 11 的工具提示上，我不希望红色圆圈悬停状态在离开工具提示之前关闭。

#button { background:transparent url(../images/red-circle.png) no-repeat scroll 0px -2px; display:block; height:23px; width:23px; } #button:hover { background-position:0 -25px; opacity: 1; }'

还有一件事，确保在单击其中的任何链接时关闭工具提示的最佳方法是什么？出于某种原因，在移动设备上，当您用手指点击打开悬停状态然后单击其上的链接时，如果您点击后退按钮，工具提示将保持打开状态。

Answer 1

您可以在每个工具提示上使用事件 onShow 和 onHide 并对触发器对象进行修改。我会用你的代码向你展示这个。 这是您的触发按钮 div：

<div id="eleven_div" class="button-eleven" style="display: block; ">
    <a href="projects/gantt/" id="button">Button 11</a>
</div>
<div id="ten_div" class="button-ten" style="display: block; ">
    <a href="projects/table/" id="button">Button 10</a>
</div>
...

以及对应的javascript：

$(".button-one").tooltip({
    position: "center right",
    delay:300,
    effect: 'slide',
    direction:'right',
    offset: [30, -12],
    slideOffset: 30,
    slideFade:'true',
    slideInSpeed:350,
    slideOutSpeed:250
});

$(".button-two").tooltip({ 
    position: "bottom left",
    delay:300,
    effect: 'slide',
    direction:'left',
    offset: [-34, 20],
    slideOffset: 30,
    slideFade:'true',
    slideInSpeed:350,
    slideOutSpeed:250
});
...

首先，您在 div 中的每个 a-tag 中都有属性 id="button"。这是绝对错误的。 Id 不能出现两次。所以最好把它改成类：

<div id="eleven_div" class="button-eleven" style="display: block; ">
    <a href="projects/gantt/" class="button">Button 11</a>
</div>
<div id="ten_div" class="button-ten" style="display: block; ">
    <a href="projects/table/" class="button">Button 10</a>
</div>

现在放置要显示的红点的回调函数。每次显示或将再次隐藏工具提示时都会调用该函数。它向触发 div 内的 a-tag 添加或删除一个类。新代码：

function hovering()
{
    this.getTrigger().find("a").first().toggleClass("hovered");
}

$(document).ready(function() {

    $(".button-one").tooltip({
        position: "center right",
        delay:300,
        effect: 'slide',
        direction:'right',
        offset: [30, -12],
        slideOffset: 30,
        slideFade:'true',
        slideInSpeed:350,
        slideOutSpeed:250,
        onShow: hovering,
        onHide: hovering
    });

    $(".button-two").tooltip({ 
        position: "bottom left",
        delay:300,
        effect: 'slide',
        direction:'left',
        offset: [-34, 20],
        slideOffset: 30,
        slideFade:'true',
        slideInSpeed:350,
        slideOutSpeed:250,
        onShow: hovering,
        onHide: hovering
    });
...

最后更改你的 CSS 代码，#button 的样式位于：

.button {
    background:transparent url(../images/red-circle.png) no-repeat scroll 0px -2px;
    display:block;
    height:23px;
    width:23px;
    overflow:hidden;
    text-indent:-999em;
    cursor:pointer;
    opacity: 1;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
}

/**
 * mouseover state, 
 * elements with the "hovered" class now behave
 * like ones in mouseover state
 */
.button:hover, .button.hovered{
    background-position:0 -25px;    
    opacity: 1;
}

/* clicked state */
.button:focus {
    background-position:0 -25px;
}

---

要在单击链接时关闭工具提示，请将以下代码放在工具提示定义之后：

$(".tooltip, .tooltip-brite, ... all your tooltip-classes").live("click", function() {  
    $(this).prev().tooltip().hide();
});

$(".button-two, .button-one, ... all your button-classes").live("click", function() {   
    $(this).tooltip().hide();
});

当带有红色圆点的 div 或工具提示框被点击时，这将关闭工具提示。