Twitter Bootstrap Tooltip: мерцает при размещении сверху кнопки, но отлично работает при размещении слева/справа/снизу

Я имею дело с каким-то странным поведением для экземпляра всплывающей подсказки bootstrap.

На странице, с которой я работаю, есть несколько кнопок, которые при зависании отображают всплывающие подсказки с описанием функциональности кнопок. Всплывающие подсказки отображаются сверху кнопок, и, за исключением одной кнопки, все работает нормально. Эта одна кнопка отображает всплывающую подсказку с непрерывным мерцанием, сама всплывающая подсказка закрывает часть кнопки (вместо того, чтобы быть полностью на верхней части кнопки) и предотвращает правильное нажатие кнопки. Если "размещение данных" для всплывающей подсказки изменено с "сверху" на "левый" / "правый" / "снизу", всплывающая подсказка отображается правильно.

Кроме того, кнопка, которая вызывает у меня проблемы, завершается в div, который имеет "float: right"; присвоенный в css. Я упоминаю об этом, потому что заметил, что если я удалю поплавок, всплывающая подсказка отлично работает. К сожалению, если я удалю поплавок, сама кнопка теряет правильное положение.

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

Спасибо.

Update:

qaru.site/info/485270/... представляет ту же проблему, что и проблема, с которой я столкнулся. Я нашел ответ полезным.

Ответы

Ответ 1

Я нашел быстрое решение для своей проблемы. Хотя относительно короткое, мое первоначальное описание всплывающей подсказки было разделено на две строки. Случайно, я попытался сократить текст всплывающей подсказки, чтобы поместиться на одной строке. Как только это было сделано, всплывающая подсказка была правильно отображена. Поэтому я предполагаю, что должна быть проблема с длиной текста всплывающей подсказки и тем фактом, что кнопка отображается полностью справа от страницы (и вверху страницы). Я пока не буду исследовать это дальше.

Ответ 2

У меня была такая же проблема. Я обнаружил, что всплывающие подсказки Bootstrap не позиционируют себя правильно над элементами "floated" или "inline/inline-block", когда эти элементы находятся внутри контейнера с относительным или абсолютным позиционированием. У меня есть кнопка, плавающая справа, внутри абсолютно позиционированного родительского контейнера. Если я удалю абсолютное позиционирование родителя, всплывающая подсказка отобразится отлично. Bootstrap необходимо решить эту проблему.

Ответ 3

Это происходит на встроенных элементах, таких как теги a. Установка свойства display на block устраняет проблему.

Ответ 4

Поздний отклик, но у меня была эта же проблема, и я смог ее разрешить, используя параметр "container" в ссылке jQery tooltip на элемент html.

См. эту страницу и ссылку jsfiddle.

Вы можете увидеть подробности опций контейнера tooltip здесь.

Ответ 5

Основываясь на ответе Стива, я обнаружил, что проблема в том, что моя ссылка css на шрифт awesome css была после загрузочного css. Bootstrap css устанавливает свойство отображения для шрифтов, которые являются "встроенными блоками".

Итак, чтобы исправить проблему, я просто переместил ссылку bootstrap css после шрифта awesome css, и это устранило мерцающую проблему для меня.

Ответ 6

Я не уверен, сколько у вас контроля над битами Bootstrap, но похоже, что событие hover постоянно срабатывает. Путем остановки этого было бы использовать .stop() перед вызовом, но я не уверен, что это возможно здесь, например:

$('#myelement').stop().fadeOut(200);

Я не знаю, можете ли вы сделать что-то подобное с помощью вызова Bootstrap, но, возможно, стоит попробовать!

Ответ 7

Добавить в подсказку pointer-events: none; правило css, например

.tooltip {
  pointer-events: none;
}

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