How to position a popover in Ionic 2

If you only want to change the placement of the popover relative to the pressed element, CSS transformations might help. E.g. to place it to the top-right / left-bottom of the clicked element, instead of default bottom-right corner.

Add cssClass option:

let popover = this.popoverCtrl.create(PopoverPage, {}, {cssClass: 'popover-top-right'});

popover.present({
  ev: event
});

and use the following CSS somewhere:

.popover-top-right .popover-content {
  transform: translateY(-120%) !important;
}

This solution is somewhat like Mnemo suggested, but more generic as you don't need to specify fixed coordinates. Though it's not that customizable as the accepted workaround from Schlaus.

This way you can use translateXY(-100%, -100%) to put the popover to the left-top corner, etc. The !important is perhaps needed to override ionic styles (or use more specific CSS selector instead).

Though the above code works for some people, but I found a better solution where passing the cssClass on popover.

To make use of the cssClass, you must declare it globally in app.scss as shown below:

.custom-popover .popover-content {
  width: 80%;
  top: 70px;
  left: 30px;
  bottom: 70px
}

In your .ts file, you can pass the class like below:

let popover = this.popoverCtrl.create(PopoverPage, {}, {cssClass: 'custom-popover'});

popover.present();

Looking through the code, there doesn't seem to be an option for the popover's position. However, when opening the popover as a result of the user tapping something, it can be positioned by the click event. We can use that knowledge for manual positioning as well:

let pop = this.popoverCtrl.create(MyPopover);

let ev = {
  target : {
    getBoundingClientRect : () => {
      return {
        top: 100
      };
    }
  }
};

pop.present({ev});

A few things to note:

• You can set the value for top, left, or both.
• The values must be given in pixels, as numbers.
• If top or left is not given, then the usual positioning algorithm is used for that value.

I'd be happy to know if there's a better way, but so far this is the best I could come up with.

This certainly works in Ionic2 and 3, happy to have someone confirm if it works in Ionic4 as well!