Бутстрап кнопка подсказка скрыть на клик

Question

На моем сайте у меня есть несколько кнопок. Когда пользователь нажимает кнопку, открывается модальный. Когда пользователь нажимает кнопку, отображается всплывающая подсказка.

ли использовать этот код:

<button type="button" rel="tooltip" title="Tooltip content" class="btn btn-sm btn-default" data-toggle="modal" data-target="#DeleteUserModal"> 
    <span class="glyphicon glyphicon-remove"></span> 
</button> 

<div>modal</div> 

<script> 
$(document).ready(function(){ 
    $('[rel="tooltip"]').tooltip(); 
}); 
</script> 

Это работает, но единственная проблема в том, что подсказка остается видимым после нажатия кнопки, и модальный показано. Как только модальная функция закрыта, всплывающая подсказка снова скрыта.

Как предотвратить это? Я хочу, чтобы всплывающая подсказка отображалась только при наведении курсора, и не все время, когда видимый модальный вид.

Answer 1

Исправлена ​​ошибка при использовании.

$(document).ready(function(){ 
    $('[rel=tooltip]').tooltip({ trigger: "hover" }); 
}); 

Проблема заключалась в том, что фокусировка остается на кнопке, когда модальная функция открыта. Изменение триггера для зависания решает проблему.

Answer 2

Не используйте атрибуты данных из нескольких плагинов на одном элементе. Например, кнопка не может иметь всплывающую подсказку и переключать модальную. Для этого используйте оберточный элемент.

Answer 3

Вы должны открыть модально вручную с помощью функции щелчка и скрыть всплывающую подсказку вручную через jquery. Так что берите модальное переключение атрибутов из кнопки так:

<button type="button" rel="tooltip" title="Tooltip content" class="btn btn-sm btn-default"> 
    <span class="glyphicon glyphicon-remove"></span> 
</button> 

, а затем открыть модальное с собственным JQuery OnClick функции, а также скрыть подсказку в то же время, как так:

$(document).ready(function(){ 
    $('[rel="tooltip"]').tooltip(); 
    $('[rel="tooltip').on('click', function() { 
    $(this).tooltip('hide'); 
    $("#DeleteUserModal").modal(); 
    }); 
}); 

Предлагаемая скрипта: Fiddle

Answer 4

Если вы хотите, чтобы закрыть подсказку перед действием, можно использовать следующее:

$('[data-toggle="tooltip"]').tooltip("hide"); 

Например, я хочу, чтобы закрыть подсказку перед открытым модальный, вот мой код:

function OpenModal() { 
    $('[data-toggle="tooltip"]').tooltip("hide"); 
    $("#myModal").modal(); 
} 

Answer 5

$(document).ready(function(){ 
    $('[data-toggle="tooltip"]').tooltip({ trigger: "hover" }); 
});