There is an issue that I am facing. When Tether moves the Popover so that it remains within the viewport, the arrow stays centered. In the image below, the popover is attached to the first picture (where the mouse cursor is), but it appears as if it's attached to the second picture because the small arrow is still in the center. Is there any way to resolve this?
https://i.sstatic.net/BxSFo.png
This is my code snippet:
$('.popover-image').popover({
html: true,
trigger: 'hover',
placement: 'bottom',
constraints: [{
to: 'scrollParent',
attachment: 'together',
pin: true
}],
title: $(this).data('title'),
content: function(){return '<img src="'+$(this).attr('src') + '" />';}
});