Positioning ion-popover programmatically

Ionic Framework
1

I wish to use the ion-popover component to display some help text to the user when the page loads, the component appears to support displaying the popover next to an element if the user clicks the element.

However, I wish to display the popover when the page loads to provide the user with some help text which they can dismiss once they’ve read it.

I have got part of the way by using a @ViewChild('addproject') button: any; which points to my element in the page that I wish to display the popover next to.

I have then created an object to emulate the $event object like so: -

        const ev = {
            target: this.button.el
        }

and by passing this through to the await popover.present(); much to my amazement the popup does indeed display in the correct location however, 2 problems if the page is resized the popover is static and I also lose the pointer of the popover pointing to the target element.

NOTE: This problem with the popover not moving is a problem using the component normally!

I feel this functionality should really be part of this component and would love to see it improved but can anybody help me in the short term?

Thanks in advance
Andy

1 Like