Всплывающая подсказка Bootstrap не исчезает после нажатия кнопки и отпускания мыши


115

У меня проблема с всплывающей подсказкой начальной загрузки: когда я нажимаю кнопку, всплывающая подсказка остается, даже если курсор находится за пределами кнопки. Я просмотрел руководство - всплывающую подсказку Bootstrap, и если я нажимаю на кнопки, я вижу ту же проблему. Есть какое-нибудь решение, чтобы это исправить? Только что попробовал в последней версии FF, IE.


В моем вопросе он тоже не работает, давайте посмотрим там. Та же проблема.
SilentCry

Ответы:


241

Это потому, что triggerне установлено. Значение по умолчанию для триггера равно 'hover focus', поэтому всплывающая подсказка остается видимой после нажатия кнопки, пока не будет нажата другая кнопка, потому что кнопка есть focused.

Итак, все, что вам нужно сделать, это определить triggerкак 'hover'only. Ниже того же примера, с которым вы связались, без сохранения всплывающих подсказок после нажатия кнопки:

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

пример документа в скрипке -> http://jsfiddle.net/vdzvvg6o/


1
Спасибо, Дэвид, это действительно работает. Я неправильно понял опцию триггера для всплывающей подсказки, теперь я прав.
SilentCry

1
@SilentCry Просто имейте в виду, на кого вы нацеливаетесь, запуск "зависания" не всегда может быть простым и распространенным.
phk 07

3
@davidkonrad Мобильные платформы, слепые пользователи. Это также может объяснить, почему они установили «фокус при наведении» по умолчанию.
phk 07

2
@phk, у bootstrap есть общая проблема, потому что он не ориентирован на мобильные устройства, в отношении слепых людей мы должны использовать атрибуты aria. Кстати, существует отличный инструмент для тестирования юзабилити, разработанный для канадских властей с несколькими "уровнями", которые вы можете выполнить -> achecker.ca/checker/index.php В моей стране нет этих стандартов, но им стоит придерживаться тем не мение.
davidkonrad

1
Возможно, вы захотите взглянуть на ответ Karmonik Cola ниже. Всплывающая подсказка при фокусе продолжает отображаться.
Дэвид Стосик

63

Я знаю больше года, но я не мог заставить это работать ни с какими примерами здесь. Мне пришлось использовать следующее:

$('[rel="tooltip"]').on('click', function () {
    $(this).tooltip('hide')
})

Это также снова показывает всплывающую подсказку при наведении курсора.


1
Это должен быть принятый ответ, который также должен быть реализован в кодовой базе начальной загрузки.
kjdion84

5
Это было чрезвычайно полезно для всплывающих подсказок начальной загрузки, размещенных на кнопках с триггером «наведения», которые вызывают асинхронные обратные передачи (т.е. отображение модальных панелей). Без этого обратная передача от нажатия кнопки приводит к тому, что всплывающая подсказка «застревает» и никогда не исчезает.
bradykey

1
В моем случае я отключал кнопку отправки, пока выполнялось действие ajax. Пока выполнялся процесс ajax, всплывающая подсказка оставалась, так как кнопка была отключена. После завершения процесса ajax кнопка снова станет «доступной». При наведении и выключении кнопки всплывающая подсказка будет закрыта. Решение Нитая все исправило. Всплывающая подсказка теперь скрывается при нажатии и по-прежнему работает при наведении курсора, когда кнопка снова становится активной.
HPWD 05

Я согласен с @ kjdion84. Я боролся, пока не нашел это
Ахмад

9

Привет, у меня есть небольшое решение этой проблемы. Если другие решения не работают, попробуйте следующее:

$('body').tooltip({
        selector: '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])',
        trigger: 'hover',
        container: 'body'
    }).on('click mousedown mouseup', '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])', function () {
        $('[data-toggle="tooltip"], [title]:not([data-toggle="popover"])').tooltip('destroy');
    });

Это тоже решение для перетаскивания. Так что я надеюсь, что это кому-то поможет :)


У меня была проблема только с кнопками сетки Telerik Kendo. Когда я щелкнул один, всплывающая подсказка не скрывалась. Это решило это!
John81

8

В моем случае проблема была воспроизведена только в Internet Explorer: независимо от того, какой элемент (ввод, div и т. Д.) Имеет всплывающую подсказку - при нажатии всплывающая подсказка остается показанной.

нашел некоторые решения в Интернете, которые рекомендуют .hide () эту всплывающую подсказку для элементов Click event - но это плохая идея - возвращение к тому же элементу - сохраняет его скрытым ... в моем случае

$('.myToolTippedElement').on('click', function () {
    $(this).blur()
})

сделали все волшебство !!! - где .myToolTippedElement - это элемент, который имеет всплывающую подсказку Курса ...


У меня тоже работает, и у меня есть преимущество перед общепринятым решением, заключающееся в том, что всплывающая подсказка постоянно отображается в фокусе.
Дэвид Стосик

3

в angular 7 с bootstrap 4 и jquery я нашел это, и он отлично работает. Я использовал утилиту dispose, потому что она не скрывает всплывающую подсказку.

  ngAfterViewChecked() {
    $('[data-toggle="tooltip"]').tooltip({
      trigger: 'hover'
    });
    $('[data-toggle="tooltip"]').on('mouseleave', function () {
      $(this).tooltip('dispose');
    });
    $('[data-toggle="tooltip"]').on('click', function () {
      $(this).tooltip('dispose');
    });
   }

2

Попробуйте использовать rel="tooltip"вместо того, data-toggle="tooltip"что сработало в моем случае. Я использовал data-toggle="tooltip"и также установил условие триггера как наведение, которое в моем случае не сработало. Когда я изменил свой селектор данных, он сработал.

HTML-код:

<button id="submit-btn" type="submit" class="btn btn-success" rel="tooltip" title="Click to submit this form">Submit</button>

Код JS // Подсказка $ ('. Btn'). Tooltip ({trigger: 'hover'});

Это обязательно удалит застрявшую подсказку.


2

Ответ Дэвида выше помог решить мою проблему. У меня было событие наведения и нажатия на кнопку. Firefox на MAC вел себя так, как я хотел. То есть показывать всплывающую подсказку при наведении, не показывать всплывающую подсказку при нажатии. В других браузерах и ОС, когда я нажимаю, всплывающая подсказка появляется и остается как показано. Даже если я наведу указатель мыши на другие кнопки для наведения. Вот что у меня было:

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true}); 

Это исправление:

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true, trigger: 'hover'}); 

2

Также вы можете добавить:

onclick="this.blur()"

1
Чем это отличается от того, что предложил Каморник Кола (кроме реализации без jQuery)? Предлагаю добавить пояснение, чтобы ответ был полезным. С уважением
ЯковЛ

2

Рабочее решение

$(document).on("click",function()
    {
    setTimeout(function()
    {

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

},500);    // Hides tooltip in 500 milliseconds
    });

Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, почему и / или как этот код отвечает на вопрос, улучшает его долгосрочную ценность.
Adam

@Adam Мне не удалось найти на форумах никаких рабочих решений, позволяющих скрыть всплывающую подсказку после нажатия любого элемента <a>, <button> или других элементов, к которым привязаны функции или внешний вид кнопок.
Alpha

1

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

$("#myButton").on("click", function() {
    $("div[role=tooltip]").remove();
});

1
Вы можете снова получить всплывающую подсказку при наведении курсора?
Вишну

0

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

Пришлось сделать так:

return button( selector + '.btn.btn-sm', 
             {
               hook: {
                 destroy: tooltipOff,
                 insert:  toggleTooltipOn,
               },
....

function toggleTooltipOn(vnode){
  setupJQuery();  
  jQuery[0].$( vnode.elm )
    .tooltip({container:'body', trigger: 'hover');
//container:body is to help tooltips not wiggle on hover
//trigger:hover is to only trigger on hover, not on click
}

function tooltipOff( vnode ){
  setupJQuery();      
  jQuery[0].$( vnode.elm ).tooltip('hide');
}

0

Это работает для меня:

$(document).ready(function() {
   $('#save').tooltip({
            trigger : 'hover'
        }) ;

});

Я отключал кнопку сохранения динамически, тогда проблема была.


Здесь сохранен идентификатор моей кнопки
Devendra Singraul

0

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

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

0

Это решение сработало для меня.

$('a[data-toggle="tooltip"]').tooltip({
  animated: 'fade',
  placement: 'bottom',
  trigger: 'click'
});

$('a[data-toggle="tooltip"]').click(function(event){
  event.stopPropagation();
});

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

играть на скрипке

Я пробовал большинство решений, приведенных в предыдущих ответах, но ни одно из них не помогло мне.


0

Моя проблема в DataTable. Ниже код работает для меня.

columnDefs: [ { targets: 0, data: "id", render: function (data, type, full, meta) { return '<a href="javascript:;" class="btn btn-xs btn-default" data-toggle="tooltip" title="Pending" data-container="body"><i class="fa fa-check"></i></a>'; } } ], drawCallback: function() { $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="tooltip"]').on('click', function () { $(this).tooltip('hide'); }); }


0

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

jQuery("body").on("mouseleave", ".has-tooltip", function(){
    jQuery(this).blur();
});

0

В моем случае это было исправление:

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

Я не соблюдал это правило из документации Bootstrap:

Всплывающие подсказки необходимо скрыть до того, как соответствующие элементы будут удалены из модели DOM.


0

Это также возможно в HTML, добавив следующее:

 data-trigger="hover"

 <button type="button" data-toggle="tooltip" data-placement="top" data-trigger="hover" title="To re-enable scanning, click here">Text</button>

К сожалению, это не работает, и всплывающая подсказка все еще не работает.
Fwd079

0

Также вы можете использовать этот способ для старых версий, потому что принятый ответ не сработал для меня, и я написал этот код для себя, и он хорошо работает.

$(document).on('mousedown', "[aria-describedby]", function() {
    $("[aria-describedby]").tooltip('hide');
});

0

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

$('[data-toggle="tooltip"]').tooltip({
trigger : 'click'})  

$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function () {
$(this).tooltip('hide')
})

0

Использование принудительного размытия () может снизить удобство работы пользователя. Я бы не стал этого делать. Я обнаружил, что удаление «data-original-title», а также атрибутов «data-toggle» и «title» сработало для меня.

    $(id).tooltip('hide');
    $(id).removeAttr("data-toggle");
    $(id).removeAttr("data-original-title");
    $(id).removeAttr("title");
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.