CODEWITHSUNDEEP
ionic-frameworkionic5
Cedric Ipkiss
Cedric Ipkiss

Reputation: 6337

Display Ionic popover relative to element without clicking

I need to display tooltips on a page, relative to certain elements, without a user having to click for them to be displayed - i.e. display them automatically. ion-popover seems to be the best way to do this, however, as per the documentation:

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 viewport.

I'm not sure if Ionic provides a scenario for relatively positioned popovers without a click event (documentation doesn't mention it). I also don't want to trigger a click event, as some of the elements have routerLinks and triggering the click event would navigate away from the current page. Using CSS to move the popover from the default center of the page seems a dirty workaround for me

Upvotes: 1

Views: 2009

Answers (3)

Selorb
Selorb

Reputation: 92

Got the same request, I wanted to add popovers above button elements on my Ionic page to explain what a button does on his first opening the app.

So inside my button element I created an empty div with an id and a click event like that:

<button>
  <div #btnPlusTutorial (click)="showPopover($event, 'Popover text goes here')"></div>
</button>

Then I used viewChild to get the element ref which I import first on the top of the document:

import { Component, ElementRef, ViewChild} from '@angular/core';

And before the constructor I put the element inside the variable btnPlusTutorial

@ViewChild('btnPlusTutorial') btnPlusTutorial: ElementRef<HTMLElement>;

Inside a function I click programmatically on the element

  ionViewDidEnter() {
    this.btnPlusTutorial.nativeElement.click()
  }

So it calls the function showPopover() using the popoverController that you also have to import

  async showPopover(e: Event, content: string) {
      const popover = await this.popoverController.create({
        component: PopoverComponent,
        componentProps: { content },
        event: e,
        side: "top"
      });
      
      await popover.present()
  }

Upvotes: 0

Marcus Rogers
Marcus Rogers

Reputation: 41

It would be nice if Ionic implemented "none" as a value for triggerAction property, indicating that the popover should not open when the trigger element is clicked (or hovered or anything else).

My solution was to put an empty div inside the element I want the popover to appear by, and set that empty div as the trigger element (instead of the actual button or whatever). Leave this div empty so it is sized 0px by 0px and therefore will never be clicked.

Upvotes: 1

user14698598
user14698598

Reputation:

Is this Ok for you?


    import { IonButton, IonPopover,  } from '@ionic/react';
    
    export const Sample: React.FC = () => {
           const [popoverState, setShowPopover] = useState(false);
          
        return (
           <>
             <IonButton onMouseOver={()=>setShowPopover(true)}> click me</IonButton>
            <IonPopover
            cssClass='my-custom-class'
            isOpen={popoverState}
            onDidDismiss={() => setShowPopover(false)}>
            <p>This is popover content</p>
          </IonPopover>
         </>      
        );
    };
    export default Sample;

Upvotes: 0

Related Questions