The position of the popover is determined by the popover’s parent, I believe. In the case where you use the built-in OH popover action, that parent is the window and therefore the popover is aligned with the window. To make the popover aligned with some part of your widget, the popover has to be built inside the widget.
This is not as bad as it sounds, and, in fact, you’re most of the way there already. While you’re using the OH popover action, all these lines:
- component: f7-popover
config:
class: popOver
closeByBackdropClick: true
closeByOutsideClick: true
backdrop: false
closeOnEscape: true
style:
vertical-align: center
horizontal-align: center
are not doing anything. They do not reference the widget that you just happen to be opening as a popover. They are however, exactly what you want if you are incorporating your own popup into the widget. Just take all the components from your infos_popup and place them in the default slot of the f7-popup component.
Then you can just get rid of all the action based keys in the oh-button and just keep the popoverOpen key. You may want a more descriptive class name than just ‘popOver’ the element will already have that class. But if you use something like class: info-pop and just set the popoverOpen and popoverClose properties to .popover.info-pop you should be well on your way.
If you want to see an example you can just look at the code for my widget here (use the link at the bottom - the same widget also has built-in popups if you’re rather use that instead of a popover).