Bootstrap - 以編程方式附加並顯示彈出窗口到元素

我正在使用Bootstrap v3，並且我試圖以編程方式在頁面加載時在元素旁顯示彈出窗口。 DOM中沒有彈出標記。我想創建並在JQuery中顯示它。Bootstrap - 以編程方式附加並顯示彈出窗口到元素

我試過這個，但它不起作用。

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

我在控制檯中得到「TypeError：Window.getComputedStyle的參數1不是對象」錯誤。我假設這是由上述原因造成的。

來源

2015-02-06 iltdev

這應該很好地工作。 http://bootply.com/xqcvgLv7aU檢查jQuery和Bootstrap是否在頁面中正確引用。 – ZimSystem 2015-02-06 10:36:08

它在這[[小提琴]（http://jsfiddle.net/Cerlin/gwjfe327/） – 2015-02-06 10:39:30

工作正常我找到了問題。我附加的元素也是以編程方式生成的，所以我必須確保在元素添加到DOM之後調用彈出窗口。謝謝你們:) – iltdev 2015-02-06 10:45:19

試試這個

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

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

來源

2016-04-27 01:56:27

$("[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="">

來源

2018-02-28 06:02:00

Bootstrap - 以編程方式附加並顯示彈出窗口到元素

回答

相關問題