I have upgraded the bootstrap version from 4 to 5, popper from popper to @popperjs/core version 2.11 and ngx-bootstrap to 8.0.0 . I am facing an issue where the simple example from the ngx-bootstrap is showing the arrow of the popover misaligned.
<button
type="button"
class="btn btn-primary text-center"
popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Live demo
</button>
I have the dependencies added as below
and I am importing it in my app.module as PopoverModule.forRoot() but the output I am getting is bit off as below
It get fixed only if I add position-absolute to the <div class="popover-arrow arrow">'s style.
What can be the possible reason of this behaviour?
Edit: Adding a stackblitz link https://stackblitz.com/edit/angular-simple-ngx-bootstrap-a6bspv?file=src%2Fapp%2Fapp.component.html,package.json,src%2Fapp%2Fapp.module.ts,src%2Findex.html,src%2Fapp%2Fhello.component.ts
