I’d like to open an ion-popover from my ionic page component to create a “tutorial-like” flow where when a user enters a page for the first time, a series of popovers appears showing them where key actions can be taken.
I’ve tried all sorts of things but nothing works. Tried:
- Using @ViewChild to capture the DOM element that I want the popover to open from but the Popover API doesnt want the element ref, it wants a DOM PointerEvent so…
- I tried generating a PointerEvent based on the ViewChild element but that doesnt work (and isnt intended to be used that way).
From my understanding, the popover element wants the x and y coordinates of the DOM element from the pointer event so that it know where to position the popover.
I tried hardcoding some x,y coords but this completely breaks in any form of responsive/cross platform design so that’s out.
async presentPopover(ev: any) {
const popover = await this.popoverController.create({
component: PopoverComponent,
cssClass: 'my-custom-class',
event: ev, // WHAT CAN I GENERATE IN MY COMPONENT AND PASS HERE INSTEAD OF THE CLICK EVENT?
translucent: true
});
await popover.present();
const { role } = await popover.onDidDismiss();
console.log('onDidDismiss resolved with role', role);
}