valor-software / ngx-bootstrap

Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)
https://valor-software.com/ngx-bootstrap
MIT License
5.52k stars 1.69k forks source link

popover suddenly appearing away from the icon unless i change the value with interpolation #6586

Open ngingihy opened 12 months ago

ngingihy commented 12 months ago

Bug description:

My application had a popover on an icon that used to work fine but after a certain deployment the icon it self moved away from its place, out of the container.

 <i class="btn  fa fa-star" id="star" popover="Favorite!" triggers="mouseenter:mouseleave" placement="left"
                    style="color: white;font-size: 25px;"
                    (click)="addFav()">
                    <ngx-spinner type="ball-spin-clockwise-fade"></ngx-spinner>

The thing is if i change the popover value to interpolation {{}} and read it from the. ts file, it work fine. So what could solve the issue.

I tried to add

         <i class="btn   fa fa-star"  popover="sssss" triggers="hover" placement="left"
                    style="color:rgb(219, 185, 32) ;font-size: 25px;    position: absolute; top: 0;
                    left: 0 ;"
                    (click)="removeFav()">
                    <ngx-spinner type="ball-spin-clockwise-fade"></ngx-spinner>
                    </i>

` to the inline style but it moved it upwards but not to the same exact position. How can i fix this?

ngx-bootstrap: 10.2.0

Angular: 13.3.11

Bootstrap: 5.3.0

paulswan commented 12 months ago

You need to wind back to Bootstrap 5.2.3

hakimio commented 11 months ago

Or just add the following css to your global css file:

.popover, .popover-arrow { 
     position: absolute; 
 }