Search code examples
javascripttwitter-bootstrappopoverbootstrap-4

How to control popover-arrow position in bootstrap 4

I am trying to use popover in bootstrap 4.The toggle button I set in on the top right corner.

first if I set the popover on the buttom:

    $(function () {
$('[data-toggle="popover"]').popover({
placement: 'bottom'
})

the popover will be displayed with part off the screen like:

enter image description here

then I try to use 'auto' instead of 'bottom' in the placement, but in this case the popover does not work...

after that I use 'bottom' in the placement again and use offset to move popover 50px to the left and increase the width of the popover:

$('[data-toggle="popover"]').popover({
placement: 'bottom',
offset: '0 50px'
})

css:

.popover-content{
width: 270px;
}

then the popover show like this:

enter image description here

now the popover-arrow position is misplaced, I try to move the arrow position with ''shown.bs.popover' event like:

 $('[data-toggle="popover"]').on('shown.bs.popover', function () {
 $('.popover.bottom .popover-arrow:after').css('right', 50 + 'px');
});

but it doesn't work....

Does any one know how to move the arrow postion or hide the arrow when shows up?

Thanks in advance.

Solution

  • You can adjust the position of the arrow with the following styles:

    Bootstrap 3

    .popover.bottom > .arrow {
    margin-left: 50px;
}

    Bootstrap 4

    .popover.bs-tether-element-attached-top::after,
.popover.bs-tether-element-attached-top::before{
    left: 65%;
}