[英]Bootstrap Popover arrow will not change with data-placement change once already set
Goal: 目标:
I am creating a scheduling UI using clocks with 15 minute segments that can either be occupied with a meeting, or empty. 我正在使用具有15分钟分段的时钟来创建调度UI,该时钟可以被会议占用,也可以空着。 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)
我的页面上有一个时钟图像,当您单击圆圈时,您单击的切片的外部会出现一个引导弹出窗口(提供有关该时间以及是否有会议的说明)
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: 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: 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?
这不应该改变指示箭头指向的数据位置吗?
If you grab the popover instance like this: 如果您像这样抓取popover实例:
var popover = $('.reply').data('bs.popover');
Then, to redraw the popover, use the .setContent()
method: 然后,要重绘弹出窗口,请使用
.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 演示: http : //jsfiddle.net/44RvK
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.