How to apply hover effect on IonButton so that it can open IonPopover as tooltip in Ionic-React?

Question

<IonPopover
 showBackdrop={false}
 cssClass="theme-popover"
 event={popoverState.event}
 isOpen={popoverState.showPopover}
 onDidDismiss={() =>
 setShowPopover({
  showPopover: false,
  event: undefined,
 })
 }
>
   <IonContent class="ion-padding">
     Hello World!
   </IonContent>
</IonPopover>

How to apply hover effect on IonButton so that it can open IonPopover as tooltip in Ionic-React ?

score 1 · Answer 1 · answered Jul 25 '22 at 07:58

1

you can use triggerAction="hover" to show popover on hover:

<IonButton id="hover-trigger">Hover Over Me</IonButton>

<IonPopover trigger="hover-trigger" triggerAction="hover">
   <IonContent class="ion-padding">Hello World!</IonContent>
</IonPopover>

See Documentation: ion-popover

answered Jul 25 '22 at 07:58

Najam Us Saqib

3,190
1
24
43

I tried this method but I am getting a type error, i.e. 'trigger' does not exist on type 'IntrinsicAttributes & Pick – Ankit Dhoot Jul 25 '22 at 09:18
This is the correct answer. OP is just not implementing correctly. – Cooper Scott Dec 02 '22 at 19:45

How to apply hover effect on IonButton so that it can open IonPopover as tooltip in Ionic-React?

1 Answers1