Страницы

Поиск по вопросам

понедельник, 25 февраля 2019 г.

Bootstrap tooltip внутри компонента popover

Использую Bootstrap. Имеется форма. Я беру компонент tooltip и прикрепляю к инпутам, всё ок, все красиво, все работает без дописывания стилей.
Проблема в том, я хочу использовать компонент Tooltip внутри компонента Popover bootstrap (в popover у меня имеется форма, к инпутам подключаю tooltip). В данной ситуации tooltip слипаются в верхнем левом углу.
Пример - https://jsfiddle.net/martdn/pzmt4upb/4/


Ответ

Проблема была в том, что при использование компонента tooltip внутри компонента popover, приводило к некорректному позиционированию элементов подсказок. Из-за того, что не успевает посчитать позицию подсказок tooltip.
Решение - подсказки выводим после завершение загрузки навигации CSS. С помощью стандартного события Bootstrap shown.bs.popover
$('#popover').on('shown.bs.popover', function() { myTooltip(); });
Файлы с кодом на gist
//Tooltip content var myTooltip = function() { $('.has-error input').tooltip({ placement: 'left', title: function() { return $('#message').html(); } }).tooltip('show'); } //Popover jQuery(document).ready(function() { //Popover Content $("#popover").popover({ html: true, trigger: 'click', content: function() { return $('#popoverContent').html(); } }); //Show tooltip $('#popover').on('shown.bs.popover', function() { myTooltip(); }); //Remove tooltip when closing popover $('#popover').on('hide.bs.popover', function() { $('.tooltip').remove(); }); }); body { width: 800px; } .container { padding-top: 50px; width: 400px; }


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

Отправить комментарий