2014-08-31 2 views
1

У меня есть меню боковой панели, которое пользователь может свернуть до значков, когда это необходимо, чтобы свести к минимуму горизонтальное пространство, которое занимает меню. Когда меню рушится и вы наводите значок меню, его обычный текст меню распространяется справа. В нескольких пунктах меню также есть всплывающие подсказки Bootstrap, которые отображаются справа от записи, чтобы отображать больше информации, чем это было бы удобно в меню.Запретить всплывающую подсказку 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? Не звони на номер tooltip("destroy") при добавлении .min, затем вызывается 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; 
    } 
}); 
Смежные вопросы