如何创建类似于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有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
});

相关小提琴：http://jsfiddle.net/J9WB7/