2014-08-31 32 views
1

我有一個側欄菜單,用戶可以在需要時摺疊爲圖標以最小化菜單所用的水平空間。當菜單摺疊並且您將鼠標懸停在菜單圖標上時,其通常的菜單文本向右延伸。一些菜單項還附帶有Bootstrap工具提示,它們顯示在條目右側以顯示比在菜單中合理適合的更多信息。防止引導工具提示在祖先給出類時顯示

但是,當菜單摺疊時,這些工具提示會擋住右側顯示的菜單文本。我希望工具提示位於完整的菜單項上(因此在展開圖標時將鼠標懸停在圖標和文本上),所以我不能只將工具提示分配給菜單文本。

當菜單摺疊時,它會添加一個額外的類來標記該菜單。

是否有簡單只有當菜單摺疊時才抑制這些工具提示,而無需在菜單的摺疊狀態更改時重新初始化每個相關元素上的工具提示內容?

的精簡版本,因爲這個HTML:

<div class="sidebar"> 
    <div title="A tooltip">Menu item 1</div> 
    <div title="Another tooltip">Menu item 2</div> 
    <div title="Another tooltip">Menu item 3</div> 
</div> 

而這種代碼掛鉤的工具提示:

$(".sidebar [title]").tooltip(); 

有一個簡單的方法,以防止這些工具提示被顯示時.sidebar.min?無需在添加.min時調用tooltip("destroy"),然後在刪除它時再次撥打tooltip()

回答

1

事實證明,這是比我想象的將是更容易:本show.bs.tooltip事件,也可以取消,所以如果我抓住它.sidebar,我可以檢查.sidebar是否有.min和取消事件:

$(".sidebar").on("show.bs.tooltip", function(e) { 
    if ($(this).hasClass("min")) { 
     return false; 
    } 
}); 

或者,如果我有多種因素我想這樣做,我能趕上它document,然後尋找一個標誌類上的e.target相關的祖先(這是該元素的工具提示與之相關聯):

$(document).on("show.bs.tooltip", function(e) { 
    if ($(e.target).closest(".min")[0]) { // or whatever class is relevant 
     return false; 
    } 
});