Всплывающая подсказка кнопки Bootstrap

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

Использует этот код:

<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>

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

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

Ответ 1

Исправлено с помощью.

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

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

Ответ 2

Для всего проекта скрыть подсказку

   $(document).ready(function(){
       $('[data-toggle="tooltip"]').click(function () {
          $('[data-toggle="tooltip"]').tooltip("hide");

       });
   });

Ответ 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();
  });
});

Вот скрипка, чтобы показать вам эту работу Скрипка

Ответ 4

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

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

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

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

Ответ 5

Попробуйте использовать этот код Javascript, я только что попробовал, и он работал для меня.

$(function () {
    $('body').tooltip({
        selector: '[data-toggle="tooltip"]'
    }).click(function () {
        $('[data-toggle="tooltip"]').tooltip("hide");
    });
})

Ответ 6

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

Ответ 7

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

Ответ 8

Внутри вашего документа готовая функция используйте это:

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

Ответ 9

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

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
    <span data-toggle="modal" data-target="#exampleModal">Tooltip & modal</span>
</button>

Поместите tooltip и modal на 2 отдельных элемента.