1

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
screenshot image

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')

ezio4df
  • 3,541
  • 6
  • 16
  • 31
joeschmoe1992
  • 11
  • 1
  • According to [documentation](https://getbootstrap.com/docs/4.0/components/popovers/) you must include popper.js for positioning or use bundle version of bootstrap. Have you included it? – ümit Altuntaş Oct 29 '20 at 23:16
  • @ümitAltuntaş Yes I am using the bundled version that includes popper.js – joeschmoe1992 Oct 30 '20 at 15:54

1 Answers1

0

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.

Kamar
  • 312
  • 5
  • 13