The best solution that will work for you in all occassions, especially if your website has a fluid width, is to use the viewport option of the Bootstrap Popover.
This will make the popover take width inside a selector you have assigned. So if the trigger button is on the right of that container, the bootstrap arrow will also appear on the right while the popover is inside that area. See jsfiddle.net
You can also use padding if you want some space from the edge of container. If you want no padding just use viewport: '.container'
$('#popoverButton').popover({
container: 'body',
placement: "bottom",
html: true,
viewport: { selector: '.container', padding: 5 },
content: '<strong>Hello Wooooooooooooooooooooooorld</strong>'
});
in the following html example:
<div class="container">
<button type="button" id="popoverButton">Click Me!</button>
</div>
and with CSS:
.container {
text-align:right;
width: 100px;
padding: 20px;
background: blue;
}
Similar to viewport, in Bootstrap version 4, popover introduced the new option boundary
https://getbootstrap.com/docs/4.1/components/popovers/#options