Подсказка остается иногда на странице на элементе внутри раздвижного div

Мы используем бутстрап для одного из проектов и сталкиваемся с проблемой с плагином всплывающей подсказки. На самом деле это не ошибка в бутстрапе, но проблема возникает из-за ситуации, в которой мы ее используем.

У нас есть скользящая ползунка, которая входит в содержимое div. И кнопки для скрытия/отображения эффекта с помощью всплывающей подсказки. Скользящий эффект, основанный на слайде jQuery UI.

Проблема:

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

Это также происходит и на боковой панели show. И когда это происходит, это выглядит очень плохо и багги.

Как мы можем это исправить?

Ответ 1

Отвечено на форум начальной загрузки Ричардом (https://github.com/r1ch0)

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


$('#button').on('click', function () {
  $(this).tooltip('hide')
  $('#sidebar').slide() // replace with slide animation
})

Скопировано из: https://github.com/twitter/bootstrap/issues/3446

Отправлено только потому, что кто-то может его найти.

Ответ 2

Я использовал взнос Крунала (+1 кстати), который очень помог мне, но не полностью решил проблему.
Всплывающая подсказка исчезает, когда я нажимаю на кнопку, но возвращается и снова застревает, когда моя мышка зависает, пока я не щелкнул где-то еще.

Итак, я понял, что всплывающая подсказка появляется во время зависания, а также при фокусировке элемента.
Наконец я написал это:

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

И это работает хорошо.
Спасибо.

Ответ 3

Кажется, что это правильное решение (которое не включает в себя очистку вручную) на https://github.com/twitter/bootstrap/pull/4104, надеюсь, будет скоро будет выпущен.

Ответ 4

Если вы используете подсказку для бутстрапа, то как насчет добавления опции задержки:

jQuery('#example').popover(delay: { show: 100, hide: 100 })

Если подсказка инструмента похожа на тег alt на изображении, используйте jQuery для ее удаления.

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery("img").removeAttr("alt");
});
</script>