Bootstrap - 以编程方式附加并显示元素的弹出窗口

时间:2015-02-06 10:31:51

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

我正在使用Bootstrap v3,并且我试图在页面加载时以编程方式显示元素旁边的弹出窗口。 DOM中没有popover标记。我想在JQuery中创建并显示它。

我试过这个但是它没有用。

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

我得到一个" TypeError:Window.getComputedStyle的参数1不是一个对象"控制台错误。我假设这是由上述原因造成的。

2 个答案:

答案 0 :(得分:5)

试试这个

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

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

答案 1 :(得分:0)

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