Ionic 5 Popover Position - ionic-framework

Question

I am using ion-popover.
In the example in the docs, when you click the three dots at the top right, the popover is shown right next to the clicked button.
What would be a good way of reproducing this? Is there a built-in way of doing it?
Since I didn't find a way, I am trying to set the styles for the popover manually, but that doesnt work either.
My page.ts
const popover = await this.popoverController.create({
component: OptionsComponent,
cssClass: 'my-custom-class',
event: ev
});
return await popover.present();
My global.scss
.my-custom-class .popover-content {
position: absolute;
right: 0;
top: 0;
}
Am I doing something wrong? Is there a better way to approach this?

Answer 1

It's explained in the docs (emphasis mine) :
To present a popover, call the present method on a popover instance. In order to position the popover relative to the element clicked, a click event needs to be passed into the options of the the present method.
HTML
<div (click)="showPopover($event)">
<div>AAA</div>
</div>
In your class, pass the event as an argument to your method:
showPopover(event) {
const popover = await this.popoverController.create({
event,
component: OptionsComponent,
cssClass: 'my-custom-class', // optional
});
return await popover.present();
}
No need for extra CSS unless you want to style the content of your modal.