Tooltip, Popover, Popper в результатах mFilter2
675
2
Здравствуйте! Пытаюсь добавить всплывающие подсказки в результаты "mFilter2", но возникают проблемы, чуть-ли не "космического масштаба", особенно с Popover:), если использовать Tooltip в результатах mFilter2, подсказки работают только до того момента, пока не используешь фильтр.
<script>
//Инициализация (Tooltip)
$(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<script>
//Инициализация (Popover)
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
<span data-toggle="tooltip" data-placement="top" title="Текст тест">?</span><a href="#" data-toggle="popover" data-placement="top" data-content="Текст тест" onclick="return false">?</a>
Всё правильно. Когда вы используете фильтр, mFilter2 в #mse2_results загружает новые результаты (новые элементы), а те, которые вы инициализировали как Tooltip после загрузки на этой странице уже нет (они были удалены). Теперь чтобы новые элементы после применения фильтра показывались как Tooltip их нужно заново инициализировать.
С Popover практически тоже самое, с помощью JavaScript он позиционируется относительно элемента, но после того, как элемент удаляется, он не понимает, как его нужно позиционировать, и поэтому он «улетает».
В этой ситуации нужно инициализировать Tooltip и Popover не только после загрузки страницы, но также после обновления результатов в #mse2_results.
Т.е.:
$(function(){ $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="popover"]').popover(); }); $(document).on('mse2_load', function() { // удаляем popover $('.popover').remove(); // инициализируем новые элементы с data-toggle="tooltip" и data-toggle="popover" соответственно как Tooltip и Popover $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="popover"]').popover(); });