Bootstrap - 以编程方式附加并显示弹出框到元素答案

【问题标题】：Bootstrap - Programmatically attach and show popover to an elementBootstrap - 以编程方式附加并显示弹出框到元素
【发布时间】：2015-02-06 10:31:50
【问题描述】：

我正在使用 Bootstrap v3，并尝试在页面加载时以编程方式在元素旁边显示一个弹出框。 DOM 中没有弹出框标记。我想在 JQuery 中创建并显示它。

我已经尝试过了，但它不起作用。

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

我在控制台中收到“TypeError：Window.getComputedStyle 的参数 1 不是对象”错误。我假设这是由上述原因引起的。

【问题讨论】：

应该可以的。 bootply.com/xqcvgLv7aU 检查页面中是否正确引用了 jQuery 和 Bootstrap。
它在这个fiddle中工作正常
我找到了问题所在。我要附加的元素也是以编程方式生成的，因此我必须确保在将元素添加到 DOM 之后调用弹出框。谢谢大家:)
偶然发现了这个。快速提示，无需选择元素两次，只需将 .popover('show') 链接到您之前的 popover() 调用即可。

标签： jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-popover

【解决方案1】：

试试这个

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

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

【讨论】：

【解决方案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="">

【讨论】：