# Popover always positioned at the center of the current view

**URL:** <https://forum.ionicframework.com/t/popover-always-positioned-at-the-center-of-the-current-view/54495>\
**Category:** ionic-v3\
**Created:** [June 10, 2016, 6:28pm UTC](https://forum.ionicframework.com/t/popover-always-positioned-at-the-center-of-the-current-view/54495 "2016-06-10T18:28:19Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![skydive](https://avatars.discourse-cdn.com/v4/letter/s/a183cd/32.png) [@skydive](https://forum.ionicframework.com/u/skydive)\
**Post date:** [June 10, 2016, 6:28pm UTC](https://forum.ionicframework.com/t/popover-always-positioned-at-the-center-of-the-current-view/54495/1 "2016-06-10T18:28:19Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![El\_Dee565](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/el_dee565/32/99956_2.png) [@El\_Dee565](https://forum.ionicframework.com/u/El_Dee565)\
**Post date:** [June 10, 2016, 6:35pm UTC](https://forum.ionicframework.com/t/popover-always-positioned-at-the-center-of-the-current-view/54495/2 "2016-06-10T18:35:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![skydive](https://avatars.discourse-cdn.com/v4/letter/s/a183cd/32.png) [@skydive](https://forum.ionicframework.com/u/skydive)\
**Post date:** [June 10, 2016, 7:30pm UTC](https://forum.ionicframework.com/t/popover-always-positioned-at-the-center-of-the-current-view/54495/4 "2016-06-10T19:30:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![brandyshea](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/brandyshea/32/148286_2.png) [@brandyshea](https://forum.ionicframework.com/u/brandyshea)\
**Post date:** [June 10, 2016, 8:21pm UTC](https://forum.ionicframework.com/t/popover-always-positioned-at-the-center-of-the-current-view/54495/5 "2016-06-10T20:21:43Z")

</div>

It should be passed like this, in the present:

```auto
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](http://ionicframework.com/docs/v2/api/components/popover/PopoverController/#usage)

---

<div class="post-metadata">

**Author:** ![skydive](https://avatars.discourse-cdn.com/v4/letter/s/a183cd/32.png) [@skydive](https://forum.ionicframework.com/u/skydive)\
**Post date:** [June 11, 2016, 3:45pm UTC](https://forum.ionicframework.com/t/popover-always-positioned-at-the-center-of-the-current-view/54495/6 "2016-06-11T15:45:48Z")

</div>

It worked. Thank you!

---

<div class="post-metadata">

**Author:** ![siphiwe](https://avatars.discourse-cdn.com/v4/letter/s/ba9def/32.png) [@siphiwe](https://forum.ionicframework.com/u/siphiwe)\
**Post date:** [February 14, 2017, 10:22am UTC](https://forum.ionicframework.com/t/popover-always-positioned-at-the-center-of-the-current-view/54495/7 "2017-02-14T10:22:16Z")

</div>

Good day.  
Is this advice still applicable? I see the link you shared no longer works and the closest seems to be [this](http://ionicframework.com/docs/v2/api/components/popover/PopoverController/#usage), which seems different 😕

---

<div class="post-metadata">

**Author:** ![brandyshea](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/brandyshea/32/148286_2.png) [@brandyshea](https://forum.ionicframework.com/u/brandyshea)\
**Post date:** [February 14, 2017, 4:04pm UTC](https://forum.ionicframework.com/t/popover-always-positioned-at-the-center-of-the-current-view/54495/8 "2017-02-14T16:04:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![0xabhishek](https://avatars.discourse-cdn.com/v4/letter/0/6f9a4e/32.png) [@0xabhishek](https://forum.ionicframework.com/u/0xabhishek)\
**Post date:** [March 25, 2019, 12:30pm UTC](https://forum.ionicframework.com/t/popover-always-positioned-at-the-center-of-the-current-view/54495/9 "2019-03-25T12:30:17Z")

</div>

Thank you very much!

---

<div class="post-metadata">

**Author:** ![Trivedi](https://avatars.discourse-cdn.com/v4/letter/t/3d9bf3/32.png) [@Trivedi](https://forum.ionicframework.com/u/Trivedi)\
**Post date:** [April 9, 2019, 2:54pm UTC](https://forum.ionicframework.com/t/popover-always-positioned-at-the-center-of-the-current-view/54495/10 "2019-04-09T14:54:03Z")

</div>

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  
});  
}

---

<div class="post-metadata">

**Author:** ![nathand](https://avatars.discourse-cdn.com/v4/letter/n/dec6dc/32.png) [@nathand](https://forum.ionicframework.com/u/nathand)\
**Post date:** [April 23, 2019, 11:55am UTC](https://forum.ionicframework.com/t/popover-always-positioned-at-the-center-of-the-current-view/54495/11 "2019-04-23T11:55:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![thesniper102](https://avatars.discourse-cdn.com/v4/letter/t/3bc359/32.png) [@thesniper102](https://forum.ionicframework.com/u/thesniper102)\
**Post date:** [January 20, 2020, 8:17am UTC](https://forum.ionicframework.com/t/popover-always-positioned-at-the-center-of-the-current-view/54495/12 "2020-01-20T08:17:18Z")

</div>

it work with the new ionic 4 version like that

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

```

```auto
async OpenSettings(ev: any) {

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

```