Dynamically add Popover to element onInit

Just wondering if there is any way to trigger a Popover on view init?

Basically it’s a tour functionality, so the first time a user goes to a screen the popover will automatically be displayed on a button. I was able to get it to automatically show a popover with the following code but it doesn’t get attached to the element, it just displays it in the middle of the screen.


// Import modules
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { NavController, ToastController, PopoverController } from '@ionic/angular';
import { PopoverSimpleComponent } from '../../components/popover-simple/popover-simple.component';

	selector: 'app-preview',
	templateUrl: './preview.page.html',
	styleUrls: ['./preview.page.scss'],
export class ProgramPage implements OnInit {
	@ViewChild('addButton', { read: ElementRef, static: false}) addButton: ElementRef;

		public navCtrl: NavController,
		public toastCtrl: ToastController,
		public popoverCtrl: PopoverController
	) {

	async ngOnInit() {
		this.presentPopover(this.addButton.nativeElement, 'Text instructions');

preview.html (relevant component only)

<ion-button #addButton class="b-add-to-library" color="primary" size="small" (click)="addToLibrary($event)">
	<ion-icon name="add"></ion-icon>
	<ion-label>Add to Library</ion-label>