Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

PopoverController

Improve this doc

A Popover is a dialog that appears on top of the current page. It can be used for anything, but generally it is used for overflow actions that don't fit in the navigation bar.

Creating

A popover can be created by calling the create method. The view to display in the popover should be passed as the first argument. Any data to pass to the popover view can optionally be passed in the second argument. Options for the popover can optionally be passed in the third argument. See the create method below for all available options.

Presenting

To present a popover, call the present method on a PopoverController instance. In order to position the popover relative to the element clicked, a click event needs to be passed into the options of the the `present method. If the event is not passed, the popover will be positioned in the center of the current view. See the usage section for an example of passing this event.

Dismissing

To dismiss the popover after creation, call the dismiss() method on the Popover instance. The popover can also be dismissed from within the popover's view by calling the dismiss() method on the ViewController. The dismiss() call accepts an optional parameter that will be passed to the callback described as follows. The onDidDismiss(<func>) function can be called to set up a callback action that will be performed after the popover is dismissed, receiving the parameter passed to dismiss(). The popover will dismiss when the backdrop is clicked by implicitly performing dismiss(null), but this can be disabled by setting enableBackdropDismiss to false in the popover options.

Note that after the component is dismissed, it will not be usable anymore and another one must be created. This can be avoided by wrapping the creation and presentation of the component in a reusable function as shown in the usage section below.

Usage

To open a popover on the click of a button, pass $event to the method which creates and presents the popover:

<button ion-button icon-only (click)="presentPopover($event)">
  <ion-icon name="more"></ion-icon>
</button>
import { PopoverController } from 'ionic-angular';

@Component({})
class MyPage {
  constructor(public popoverCtrl: PopoverController) {}

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

The PopoverPage will display inside of the popover, and can be anything. Below is an example of a page with items that close the popover on click.

@Component({
  template: `
    <ion-list>
      <ion-list-header>Ionic</ion-list-header>
      <button ion-item (click)="close()">Learn Ionic</button>
      <button ion-item (click)="close()">Documentation</button>
      <button ion-item (click)="close()">Showcase</button>
      <button ion-item (click)="close()">GitHub Repo</button>
    </ion-list>
  `
})
class PopoverPage {
  constructor(public viewCtrl: ViewController) {}

  close() {
    this.viewCtrl.dismiss();
  }
}

Instance Members

config

create(component, data, opts)

Present a popover. See below for options

Param Type Details
component object

The Popover

data object

Any data to pass to the Popover view

opts PopoverOptions

Popover options

Advanced

Popover Options

Option Type Description
cssClass string Additional classes for custom styles, separated by spaces.
showBackdrop boolean Whether to show the backdrop. Default true.
enableBackdropDismiss boolean Whether the popover should be dismissed by tapping the backdrop. Default true.

Sass Variables

Property Default Description
$popover-ios-width 200px

Width of the popover content

$popover-ios-min-width 0

Min width of the popover content

$popover-ios-min-height 0

Minimum height of the popover content

$popover-ios-max-height 90%

Maximum height of the popover content

$popover-ios-border-radius 10px

Border radius of the popover content

$popover-ios-text-color $text-ios-color

Text color of the popover content

$popover-ios-background $background-ios-color

Background of the popover content

$popover-ios-arrow-background $popover-ios-background

Background of the popover arrow

Property Default Description
$popover-md-width 250px

Width of the popover content

$popover-md-min-width 0

Min width of the popover content

$popover-md-min-height 0

Minimum height of the popover content

$popover-md-max-height 90%

Maximum height of the popover content

$popover-md-border-radius 2px

Border radius of the popover content

$popover-md-text-color $text-md-color

Text color of the popover content

$popover-md-background $background-md-color

Background of the popover content

$popover-md-box-shadow-color rgba(0, 0, 0, .3)

Box shadow color of the popover content

$popover-md-box-shadow 0 3px 12px 2px $popover-md-box-shadow-color

Box shadow of the popover content

Property Default Description
$popover-wp-width 200px

Width of the popover content

$popover-wp-min-width 0

Min width of the popover content

$popover-wp-min-height 0

Minimum height of the popover content

$popover-wp-max-height 90%

Maximum height of the popover content

$popover-wp-border 2px solid #ccc

Border of the popover content

$popover-wp-border-radius 0

Border radius of the popover content

$popover-wp-text-color $text-wp-color

Text color of the popover content

$popover-wp-background $background-wp-color

Background of the popover content

API

Native

General