如何創建類似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+中的工具提示？

回答

相關問題