Bootstrap Popover Ignoring Placement Option

Question

I have a select inside a bootstrap modal that contains options with bootstrap popovers containing a more detailed description of each option. Currently no matter what I set the placement option to in the popover initialization, it pops up in the middle of the select box, covering the other options in the list. The select allows multiple options to be selected so this is not ideal for user experience. Looking at similar questions, I thought that setting container: 'body' would help, but the issue persisted as shown here:

Popover

My current popover initialization:

$('#selectId>option').popover({
    container: 'body',
    html: true,
    placement: 'right',
    trigger: 'manual',
});

I have tried changing the position to 'left', 'top', and 'bottom', and no matter which option I use, the popover appears in the same position when I trigger it using $('#selectId>option').popover('show')

Answer 1

Try giving more width(space) for select box because sometimes "popover" needs more space for that placement.

data-placement="right"

and use an attribute like this.