如何在IonButton上应用悬停效果，以便它可以在IonReact中打开IonPopover作为工具提示

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>

如何在IonButton上应用悬停效果，以便它可以在IonReact中打开IonPopover作为工具提示？

Answer 1

您可以使用triggerAction="hover"在悬停时显示弹出窗口：

<IonButton id="hover-trigger">Hover Over Me</IonButton>
<IonPopover trigger="hover-trigger" triggerAction="hover">
<IonContent class="ion-padding">Hello World!</IonContent>
</IonPopover>

请参阅文档：离子弹出