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...
