Open popover at different location

#1

Hi,

I have a popover on my page which is positioned next to an element correctly when click it.
Now I have some special cases where I need to open the popover in other cases - when user did not click the element next to which it shall be opened.
Since I have no click event on that element now, how can I open the popover in the correct location?

Greetings

Ralf

#2

Ok i could simulate a click on the element like below, which works, but seems very hacky… Better ideas welcome

    function simulateClick() {
	var cart = document.querySelector("#cart ion-icon");
	var rect = cart.getBoundingClientRect();
	console.log(rect.top, rect.right, rect.bottom, rect.left);
	
	var evt = new MouseEvent("click", {
		bubbles: true,
		cancelable: true,
		view: window,
		clientX: rect.left,
		clientY:rect.top,
		screenX: rect.left,
		screenY:rect.top
	});
	cart.dispatchEvent(evt);
 
    }
#3

Yes, instead of passing the click event, create a fake event with the bounds of an element that you want to position it in relation with.

presentPopover(){
 let myEvent={
  target:{
    getBoundingClientRect : () => {
              return document.getElementById("button").getBoundingClientRect();
    }
  }
}

 let popover = this.popoverCtrl.create(PopoverPage);
 popover.present({
  myEvent: myEvent
 });

It should work.