Bootstrap - программно прикрепить и показать popover к элементу

Question

Я использую Bootstrap v3, и я пытаюсь показать popover программно, рядом с элементом, когда страница загружается. В DOM нет разметки popover. Я хочу создать и показать его в JQuery.

Я пробовал это, но он не работает.

$(document).ready(function() { 
    $('.theElement').popover({ 
      placement:'right', 
      trigger:'manual', 
      html:true, 
      content:'popover content' 
     }); 
    $('.theElement').popover('show') 
}); 

Я получаю «TypeError: Аргумент 1 из Window.getComputedStyle не является объектом» ошибка в консоли. Я предполагаю, что это вызвано вышеизложенным.

Answer 1

Попробуйте

$(document).ready(function() { 
    $('.theElement').attr('data-placement','right') 
    //add all atributes..... 

    //and finally show the popover 
    $('.theElement').popover('show') 
}); 

Answer 2

$("[wf-popover]").popover({ 
     html : true, 
     content: function() { 
      var content = $(this).attr("wf-content"); 
      return content; 
     }, 
     title: function() { 
      var title = $(this).attr("wf-title"); 
      //return $(title).children(".popover-heading").html(); 
      return title; 
     }, 
     placement: function() { 
      var my = this.$element.attr('wf-popover') 
      return my; 
     }, 
     trigger: 'hover' 
    }); 

элемент

<img src="profile.jpg" wf-popover="left" wf-content="<img src='profile_big.jpg' width=500 height=500 />" data-original-title="" title="">