Tip和菜單有類似的功能，即鼠標光標移上去的時候顯示指定元素，鼠標光標離開的時候隱藏該元素。如下
示例1：下拉菜單(鼠標移動到“客戶服務”上時出現，離開則隱藏)
示例2：水平菜單(鼠標移動到“餐飲美食”出現，離開則隱藏)
示例3：Tip示例(鼠標移動到“更換”出現，離開則隱藏)
從交互角度講很簡單，移上去顯示，離開隱藏。代碼則是兩個事件mouseenter，mouseleave。但有個細節，如果觸發元素(比如上面Tip里的“更換”)，不包含下面顯示的城市列表div的話，鼠標光標離開時就隱藏了，但用戶其實是想移動到城市列表里去選另外一個城市。
通常有如下三種實現方式
一、觸發元素把后顯示的元素包含進來，一般菜單都是這么實現的。因為每個菜單的內容都不一樣，這種結構是合理的。這種結構不會出現鼠標移動不到菜單里的情況。如示例1的HTML結構
線上示例：http://snandy.github.io/lib/menu/menu.html
二、觸發元素不包含后顯示元素，即兩者可能是平級的（兄弟元素）。這種結構會出現鼠標移動不到顯示元素上。JS需要做些特殊處理。如示例3的HTML結構
線上示例：http://snandy.github.io/lib/menu/tip.html
這種不包含結構往往用在很多相同元素的tip上，這時只要用一個顯示元素，不必每個里面都包含相同HTML代碼。實現時須注意，div#city和div.citys都要添加mouseenter和mouseleave事件。
- div#city觸發mouseenter時，顯示div.citys
- div#city觸發mouseleave時，延遲隱藏div.citys，用一個標示boo變量記錄是否該隱藏
- div.citys觸發mouseenter時，boo標示為false，表示不隱藏
- div.citys觸發mouseleave時，boo標示為true，表示可以隱藏
三、同二類似，也是延遲一段時間隱藏，當觸發div.citys的mouseenter時移除div#city的mouseenter事件，div.citys的mouseleave事件觸發時再重新添加上