I need to re-position an existing popover once Ajax data has been returned (size of data returned will vary) and I am doing this by modifying .css top and left for the popover in the completion block.
I can read the height and width with :
$popoverElement.height()
$popoverElement.width()
Then re-calculate positions for $popoverElement.css({top: newtop}) and $popoverElement.css({left: newleft}).
From looking at other posts, this seems to be the only option.
If data-placement of current popover is right, I just need to change top (to adjust the vertical position of the popover). However, if the data-placement is left then I also need to change the horizontal position of the popover.
How can I read the data-placement attribute of the popover, to use in an if clause? I am setting this attribute correctly in the page, but don't know how to reference it in my function.
EDIT : The reason I'm doing this, is because the arrow is no longer aligned when the popover resizes with the new content - this is the problem I am trying to solve, if there's a better way to achieve this, please let me know!
You can get it from the bs data object associated with the popover instance.
var popoverData = $popoverElement.data('bs.popover');
var popoverPlacement = popoverData.options.placement;
console.log(popoverPlacement);