No worries, building the popups/popovers in the widgets does get a little involved. The basics are as follows:
In your widget you need an f7-popup or f7-popover component as a child of the main widget component. In your case, that main component is the f7-card, so your basic structure is something like this:
component: f7-card
config:
...card config
slots:
default:
- component: f7-card-content
...all your basic visible components as you're already laid out
- component: f7-popover
config:
...popover configurations
slots:
default:
...all the components for your popover
The only other step is to make sure that you have at least one component on the widget that can open the popover and some way to close the popover once it’s open. For this you have to use the f7 built-in popoverOpen and popoverClose properties; you can’t use the oh specific actions. Using popoverOpen and popoverClose, is however pretty easy. Each of them just take a css identifier that points to the element you want opened/closed. For reasons specific to css in this case it is best just to stick to css classes (which are identified with a ‘.’ in front of them). First then, you have to assign a fairly unique class name to your popover. Every popup automatically gets a class of popup and every popover gets popover, but you don’t want it to be one of these generic names in case your widget gets more complicated because then there might be some confusion as to which element you are trying to open. So, best to just add your own additional class.
- component: f7-popover
config:
class: some-unique-class-name
Second, once you have a unique class name, then you just use that for the popoverOpen and popoverClose values. If you want to be even more precise about what you are identifying, then you can included the generic class as well by chaining together the css class names.
- component: some-widget-component
config:
popoverOpen: .popover.some-unique-class-name
...rest of the component config
If you want the popover to automatically close when you’ve interacted with it, then you just use popoverClose on any of the components in the popover that your likely to click on or specifically add a close button.
- component: f7-popover
config:
...popover configurations
slots:
default:
- component: oh-button
config:
popoverClose: .popover.some-unique-class-name
text: Close popover
...rest of popover