Twitter Bootstrap Popover:动态生成数据后重新定位或调整大小?

时间:2013-10-16 00:57:14

标签: javascript twitter-bootstrap popover

我有几个popover按钮,点击后动态获取弹出信息。我能够获得相应按钮的正确信息,但是很难重新定位或重新调整弹出窗口的大小。

[这是链接] http://bootply.com/87953,可以看到问题。

为了简化我面临的问题,我修改了我的代码。

有关如何仅使用JavaScript重新调整或重新定位popover的任何建议都会受到赞赏吗?

1 个答案:

答案 0 :(得分:0)

我找到了使用javascript更新popover属性的解决方案。在我的例子中,我点击了一个按钮更新了popover的内容,标题和位置。您可以参考 JSFiddle

HTML:

<div class="span1 offset1" style="margin:100px">
     <a href="#" id="qoo" rel="popover" class="circle"> Click to popover</a>
     <div id="content-wrapper1" class="content-wrapper"> texttttttat</div> 
</div>

<input type="button" id="change_content" value="Change Popover content and placement">

JS:

$('#qoo').popover({
    placement : 'right',
    html : true,
    delay: { 
             show: 500, 
             hide: 500
    },
    title:'old_title',
    content: function() {
        return $('#content-wrapper1').html();
    }                 

});

$('#change_content').click(function(){
    alert('Popover title, content and placement changed');
    $('#qoo').popover('destroy');

    $('#qoo').popover({
        content:'new content',
        title:'new title',
        placement:'top'
    });
});