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

enter image description here 如何创建类似Google+中的工具提示？

我想创建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”显示为工具提示，如图所示。如果用户没有悬停工具提示，我还需要隐藏此工具提示。我怎样才能做到这一点？

来源

2013-03-08 Ashish Singh

不管你的方法，MVC将会使生活变得更加简单。 – Madbreaks 2013-03-08 18:42:17

@Madbreaks MVC与此有什么关系？ – user2019515 2013-03-08 18:43:48

@Madbreaks哪个MVC？ – 2013-04-20 18:56:54

一种选择是让“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/

来源

2013-03-10 01:51:02 JuanT

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

回答

相关问题