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

Goal:

I am creating a scheduling UI using clocks with 15 minute segments that can either be occupied with a meeting, or empty. I have a clock image on my page, and when you click on the circle, a bootstrap popover comes up on the outside of the pieslice that you clicked on (giving a description of that time and where there is a meeting or not)

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

Problem:

Depending on what quadrant of the clock you click on (top, bottom, left, right) I change the data-placement of the popover so the arrow will be pointing towards the clock. This works the first time I do it, but after that, every time I reposition the popover for a new click, the arrow direction remains the same.

根据您点击的时钟象限(顶部,底部,左侧,右侧),我会更改弹出框的数据位置,以便箭头指向时钟。这是第一次我这样做,但在那之后,每次我重新定位弹出窗口进行新的点击时,箭头方向保持不变。

Code:

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>

Question:

Why is the arrow not changing direction after I set it the first time? Shouldn't this be changing the data-placement which dictates where the arrow points?

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

1 个解决方案

#1

If you grab the popover instance like this:

如果你像这样抓住popover实例:

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

Then, to redraw the popover, use the .setContent() method:

然后,要重绘popover,请使用.setContent()方法:

popover.setContent();

I found out browsing the source: https://github.com/twitter/bootstrap/blob/master/js/popover.js

我发现浏览源代码:https://github.com/twitter/bootstrap/blob/master/js/popover.js

So, in your example, try:

所以,在你的例子中,尝试:

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

Update

The setContent() method also removes the placement class, so you should do:

setContent()方法也会删除放置级别,因此您应该:

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

Demo: http://jsfiddle.net/44RvK

#1