У меня есть несколько кнопок, которые показывают подробную информацию с помощью всплывающих подсказок Bootstrap. Моя основная проблема заключается в том, что эти кнопки изначально скрыты в div (display: none;), и когда отображается div (display: block;), всплывающие подсказки не работают.
Как я могу решить эту проблему?
Хорошо, я понял свою проблему ...
Я инициализирую всплывающую подсказку начальной загрузки в $ (document) .ready ():
$(document).ready(function ()
{
$(".bsTool").tooltip();
});
Все в порядке, но ... поскольку я использую UpdatePanels (ASP.NET) и мой контент отображается / скрывается с помощью асинхронной обратной передачи, $ (document) .ready () не вызывается !!!
Чтобы инициализировать плагин всплывающей подсказки при каждой асинхронной обратной передаче (и обычной обратной передаче), я добавил его в функцию загрузки страницы:
function pageLoad()
{
$(".bsTool").tooltip();
}
Функция pageLoad () вызывается ASP.NET Ajax при первой загрузке веб-страницы, а также при каждой асинхронной обратной передаче. Поэтому плагин всплывающей подсказки снова регистрируется после асинхронной обратной передачи.
Задача решена :)
Имейте в виду, что tooltip.js Bootstrap плохо работает со скрытыми элементами. Вот примечание из документации Bootstrap (ссылка).
Не пытайтесь отображать всплывающие подсказки для скрытых элементов
Вызов
$(...).tooltip('show'), когда целевой элемент -display: none;, приведет к неправильному расположению всплывающей подсказки.
