Использую 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;
}
Комментариев нет:
Отправить комментарий