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

#html #bootstrap

Использую Bootstrap. 
Имеется форма. Я беру компонент tooltip и прикрепляю к инпутам, всё ок, все красиво,
все работает без дописывания стилей.

Проблема в том, я хочу использовать компонент Tooltip внутри компонента Popover bootstrap
(в popover у меня имеется форма, к инпутам подключаю tooltip). В данной ситуации tooltip
слипаются в верхнем левом углу. 

Пример - https://jsfiddle.net/martdn/pzmt4upb/4/

    

Ответы

Ответ 1

Проблема была в том, что при использование компонента 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;
}





  

  
  

    

      

        Email address
        
      
      
    
  



Вы не ввели email