jquery - 如何创建类似于 Google+ 中的工具提示？

Question

我正在尝试创建类似 Google+ 的功能，如果用户调整窗口大小，左侧的菜单项会隐藏，当用户悬停更多链接时，隐藏的菜单项开始显示在工具提示中，正如我在上图。

我已经完成了一半。我捕获了窗口调整大小事件并成功地将隐藏列表项 (li) 附加到 div 中。这是我的代码:

<ul>
      <li><a href="#"><img alt="" src="../images/icons/home_active.png"> <em>Home</em></a></li>
      <li><a href="#"><img alt="" src="../images/icons/msg_active.png"> <em>Messages</em></a></li>
      <li><a href="#"><img alt="" src="../images/icons/reports_active.png"> <em>Reports</em></a></li>
      <li style="display: none;"><a href="#"><img alt="" src="../images/icons/mng_active.png"> <em>Manager</em></a></li>
      <li style="display: none;"><a href="#"><img alt="" src="../images/icons/shop_active.png"> <em>Shop</em></a> </li>
      <li class="mymore" style="display: block;"><a href="#"><img alt="" src="../images/icons/more_active.png"> <em>More</em></a> 
        <div id="mytooltip" style=""><a href="#"><img alt="" src="../images/icons/mng_active.png"> <em>Manager</em></a><a href="#"><img alt="" src="../images/icons/shop_active.png"> <em>Shop</em></a> </div>

      </li>
    </ul>

仔细看代码。我在 div id="mytooltip"中附加了隐藏的 li(检查 li having style="diplay:none")。但是现在悬停在 li 上(具有 class = mymore)，我想将 div id="mytooltip"显示为工具提示，如图所示。如果用户没有悬停工具提示，我还需要隐藏此工具提示。我该怎么做？

Answer 1

一种选择是让“mymore”链接向工具提示添加一个类，以使其可见。

使用jquery，可以使用悬停事件。下面的示例将“事件”类添加到工具提示。这个事件类只是将其显示设置为阻塞。

$(".mymore").hover(function () {
    $("#mytooltip").addClass("active"); //hover over
}, function () {
    $("#mytooltip").removeClass("active"); //hover out
});

编辑:如果用户将鼠标悬停在实际的工具提示上，您可能不希望工具提示关闭。您可以使用计时器来解决这个问题。例如，如果用户将鼠标移出“mymore”按钮，我们可以尝试在 0.5 秒内关闭该按钮。如果用户在计时器结束之前将鼠标悬停在实际的工具提示上，我们可以简单地清除计时器。

ToolTip = {
    interval: null,
    timer: 600,
    open: function () {
        clearTimeout(ToolTip.interval);
        $("#mytooltip").addClass("active");
    },
    close: function () {
        ToolTip.interval = setTimeout(function () {
            $("#mytooltip").removeClass("active");
        }, ToolTip.timer) //hover out
    }
}

$(".mymore, #mytooltip").hover(function () {
    ToolTip.open() //hover over
}, function () {
    ToolTip.close() //hover out
});

相关 fiddle :http://jsfiddle.net/J9WB7/