ion-popover

import { Component } from '@angular/core';
import { PopoverController } from '@ionic/angular';
import { PopoverComponent } from '../../component/popover/popover.component';

@Component({
  selector: 'popover-example',
  templateUrl: 'popover-example.html',
  styleUrls: ['./popover-example.css']
})
export class PopoverExample {
  constructor(public popoverController: PopoverController) {}

  async presentPopover(ev: any) {
    const popover = await this.popoverController.create({
      component: PopoverComponent,
      event: ev,
      translucent: true
    });
    return await popover.present();
  }
}

async function presentPopover(ev) {
  const popoverController = document.querySelector('ion-popover-controller');
  await popoverController.componentOnReady();

  const popover = await popoverController.create({
    component: 'popover-example-page',
    event: ev,
    translucent: true
  });
  return await popover.present();
}

import React, { Component } from 'react'
import { IonPopover } from '@ionic/react';

type Props = {}
type State = {
  showPopover: boolean
}

export class PopoverExample extends Component<Props, State> {

  constructor(props: Props) {
    super(props);
    this.state = {
      showPopover: false
    };
  }

  render() {
    return (
      <IonPopover
        isOpen={this.state.showPopover}
        onDidDismiss={() => this.setState(() => ({ showPopover: false }))}
      >
        <p>This is popover content</p>
      </IonPopover>
    );
  }
}