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)
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?
If you grab the popover instance like this:
var popover = $('.reply').data('bs.popover');
Then, to redraw the popover, use the .setContent()
method:
popover.setContent();
I found out browsing the source: 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:
var popover = thisVal.attr('data-content',data).data('bs.popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.