Search code examples
cssangularionic5

Position Ionic popover arrow relative to element clicked

The popover on the Ionic documntation has a nice arrow positioned at the center of the element clicked. I succeeded to create a similar arrow, but am having difficulties positioning it directly relative to the element clicked. For small elements like icons, it hardly ever gets placed directly on them:

enter image description here

Here's how I'm currently creating and displaying the arrow:

  async show_tip(ev: any, page: any) {
    page.popover = await page.popoverController.create({
      component: TipsComponent,
      cssClass: 'tips-class',
      ...
    });
  }

CSS

.tips-class > div::before {
    display: block;
    content: "";
    position: absolute;
    top: -10px;
    left: 45%;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 10px solid #fff;
}
Solution

  • If you're using ionic V4, you can just set the mode to 'ios', so you don't have to make an arrow using css

    Below is an example i made

    async onBoardingPopOver(event: any) {
    const popOver = await this.popoverController.create({
      component: PopoverComponent,
      event: event,
      componentProps: { count: this.count },
      backdropDismiss: false,
      mode: "ios", <-- over here
    });
    this.count++;

    return await popOver.present();
  }

    p.s You can also put translucent since you set the mode to ios