Popover always positioned at the center of the current view

Ionic Framework ionic-v3
1

I need to position a popover relative to clicked button, but it always shows up at the center of the current view, even when I pass event as a second argument

Here is my code:

home.html

<ion-navbar secondary *navbar>
  <ion-title>
    Popover Example
  </ion-title>

  <ion-buttons end>
    <button (click)="showPopover($event)">
      <ion-icon ios="ios-more" md="md-more"></ion-icon>
    </button>
  </ion-buttons>
  
</ion-navbar>

<ion-content class="home">
  <h1 text-center>Content goes here</h1>
</ion-content>

home.js

import {Component} from '@angular/core';
import {NavController, Popover} from 'ionic-angular';
import {MyPopover} from '../MyPopover/MyPopover';

@Component({
  templateUrl: 'build/pages/home/home.html'
})

export class HomePage {
  static get parameters() {
    return [[NavController]];
  }

  constructor(_navController) {
    this._navController = _navController;
  }

  showPopover(myEvent){
    let popover = Popover.create(MyPopover);
    this._navController.present(popover, myEvent);
  }
}

MyPopover.js

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';

@Component({
  template: `This is a popover`
})

export class MyPopover{
  static get parameters() {
    return [[NavController]];
  }

  constructor(_navController) {
    this._navController = _navController;
  }

}

I’m using beta 8.

What’s wrong with my code?

2

The event pram goes in an object in the create method as a secondary pram. Popover.create(MyPopover, { ev: myEvent}); Try that, it should position where thr click happened.

5 Likes
4

Did you mean that I should call create function like this:

let popover = Popover.create(MyPopover, myEvent);

In any case, I tried it and it didn’t help.

5

It should be passed like this, in the present:

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

Here are the API docs: http://ionicframework.com/docs/v2/api/components/popover/PopoverController/#usage

5 Likes
6

It worked. Thank you!

7

Good day.
Is this advice still applicable? I see the link you shared no longer works and the closest seems to be this, which seems different :confused:

8

I updated the link in my comment, that is the correct API now. :slight_smile:

1 Like
9

Thank you very much!

10

Here is my code, I still get popover opened in center.

async presentPopover(myEvent: any, domain, pricing, display_tooltip) {
const popover = await this.popoverCtrl.create({
component: PricePopoverPage,
componentProps: {domain: domain, pricing: pricing, display_tooltip: display_tooltip},
translucent: true
});
return await popover.present({
ev: myEvent
});
}

11

I had the same issue. You probably forgot to add $event when you call your function in your html. You must have something like
<div (click)="presentPopover(**$event**, domain, pricing, display_tooltip)></div>
I hope that will solve your problem.

12

it work with the new ionic 4 version like that

// note that i handle btn click in html view like that 
<ion-chip (click)="OpenSettings($event)">
        <ion-label>dddd</ion-label>
    </ion-chip>

async OpenSettings(ev: any) {

    const popover = await this.popoverController.create({
      component: SettingComponent,
      event: ev,
      cssClass: 'popover_class',
    });
    return await popover.present();
  }