feat: improve popover position customization

Feature Request

Ionic version:

[x] 5.x

Describe the Feature Request

The current ion-popover position is only directly below the target element. Sometimes it will automatically select the location, but I hope developers can specify its location. For example: up, down, left and right, and the position of the user’s finger click (X, Y). Explanation of the position where the finger clicks: If there is an element with a large size, I want the position of the ion-popover to be the position where the user clicks the finger, rather than directly below the element with a large size.

Describe Preferred Solution

Describe Alternatives

Related Code

this.popoverController.create({
      component: PopoverComponent,
      cssClass: 'my-custom-class',
      event: ev,
      translucent: true, 
      position: 'top/right/bottom/left/focus....'
});

[position] attribute value:

1. top
2. right
3. bottom (default)
4. left
5. focus (The focus position of the finger click)
6. focus|top,
7. focus|right
8. focus|bottom
9. focus|left

Additional Context

[liamdebeasi]

Thanks for the issue. We have added support for this (and other popover features) in https://github.com/ionic-team/ionic-framework/pull/23258, and we plan on shipping this in Ionic Framework v6.

[cjorasch]

The offscreen logic still applies. It might work if you use a 1 pixel rectangle based on the location (vs. the target element bounds) and then pick side and offsets based on content size and window bounds.