Ionic 5 Popover popover arrow

I am using Ionic5, I want to create a popover, popover which ios have i want similar in android, Issue is when popup appear the tooltip is not clearly visible as it goes behind the ion-overlay ( I guess). If I change value of z-index to 12 in inspect of browser for popover-arrow class, it works as expected below is the code for ts and global.scss

Ts file

async presentExpirationPopOver(event: any) {
this.popover = await this.popoverCtrl.create({
component: PopoverComponent, // Pass the ng-template reference here
event,
mode: 'ios',
cssClass: 'custom-pop-over',
showBackdrop:false,
arrow:true,
});
await this.popover.present();
}






SCSS

.custom-pop-over {
--min-width: 240px;
--max-width: 260px;
--border-radius: 6px;
--border: 1px solid #d0d2d3;
--padding: 5px;
--box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

.popover-wrapper{
.popover-arrow {
z-index: 12 !important;
}
}
}

Continue reading...