Tooltip, Popover, Popper в результатах mFilter2

Александр
Александр
375
2
Содержание:
  1. Комментарии
Здравствуйте! Пытаюсь добавить всплывающие подсказки в результаты «mFilter2», но возникают проблемы, чуть-ли не «космического масштаба», особенно с Popover:), если использовать Tooltip в результатах mFilter2, подсказки работают только до того момента, пока не используешь фильтр.

В шаблоне с вызовом фильтра, для инициализации подсказок, расположены два скрипта:
<script>
//Инициализация (Tooltip)
$(function(){
    $('[data-toggle="tooltip"]').tooltip();    
});
</script>

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

Александр, подскажите пожалуйста, как нужно и лучше сделать, чтобы подсказки правильно работали в результатах mFilter2?

Комментарии:

  1. Александр Мальцев
    Александр Мальцев
    04.01.2021, 16:00
    Здравствуйте!
    Всё правильно. Когда вы используете фильтр, 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();   
    });
    
    1. Александр
      Александр
      04.01.2021, 20:24
      Александр, огромное Вам спасибо за решение и подробное разъяснение причины проблемы.
    Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.