Question

目标：

我正在使用具有15分钟段的时钟来创建一个调度UI，这些段可以被会议占用，也可以是空的。我的页面上有一个时钟图像，当你点击圆圈时，你点击的pieslice外面会出现一个引导弹出窗口（给出对那个时间的描述以及会议在哪里）

问题：

根据您点击的时钟象限（上，下，左，右），我改变了弹出窗口的数据位置，使箭头指向时钟。这是第一次我这样做，但在那之后，每次我重新定位弹出窗口以进行新的点击时，箭头方向保持不变。

代码：

JS：

    var direction = getArrowDirection(seg); //finds the direction the arrow should face
    var popover =  $('#generalPopover'); 
    popover.attr("data-placement", direction);
    $('[data-toggle="popover"]').popover();
    $(".meetingPopover").popover("show");

HTML：

<div data-toggle="popover" title="Meeting at Opus: 3:30pm to 5pm" 
data-content="Some content inside the popover" style="float: left;" 
class="meetingPopover" id="generalPopover">Popover</div>

问题：

为什么第一次设置后箭头没有改变方向？这不应该改变指示箭头指向的数据位置吗？

Answer 1

如果你抓住这样的popover实例：

var popover = $('.reply').data('bs.popover');

然后，要重绘popover，请使用.setContent()方法：

popover.setContent();

我发现了浏览来源：https://github.com/twitter/bootstrap/blob/master/js/popover.js

因此，在您的示例中，请尝试：

thisVal.attr('data-content',data).data('bs.popover').setContent();

更新

setContent()方法也会删除展示位置类，因此您应该执行以下操作：

var popover = thisVal.attr('data-content',data).data('bs.popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);

演示：http://jsfiddle.net/44RvK

一旦设置了数据位置更改，Bootstrap Popover箭头就不会更改

1 个答案: