Show Popover without click

[mgurzenski]

How do you show a popover pointing at a button on page load (without having the user click anything)? Like this:

Here’s my current HTML and TS

home.html

<ion-content padding>
  <button ion-button (click)="showPopover($event)">Show Popover</button>
</ion-content>

home.ts

import { Component, ViewChild } from '@angular/core';
import { NavController, PopoverController } from 'ionic-angular';
import { RangeExtendPopoverPage } from "../range-extend-popover/range-extend-popover";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController, private popoverCtrl: PopoverController) {}
  showPopover(ev) {
    let popover = this.popoverCtrl.create(RangeExtendPopoverPage);
    popover.present({
      ev: ev
    });
  }
}

[shaifulborhan]

You have to use vanilla JS to achieve this. Put an ID on the button element and then use the code like below in ionViewDidEnter().

ionViewDidEnter() {
      let element: HTMLElement = document.getElementById('show-instructions') as HTMLElement;
      element.click();

  }

[juergenriemer]

popover needs an event target to position itself. So in order to position w/o messing with existing events, i.e. you don’t want to use a “click” event, you can create your own Event that does nothing but triggering the popover:

const openPopover = () => { /* implement your popover */ }
const triggerPopover = ( css ) => {
        const node = content.querySelector(css);
        const trigger = new Event('popover-trigger');
        node.addEventListener('popover-trigger', (evt: Event) => openPopover(evt));
        node.dispatchEvent(trigger);
    }
triggerPopover( '[aria="add-list"]' );