You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The Popover component renders the content of a popover, then passes the
resulting HTML to the Bootstrap popover plugin. That means that this component
does not contain the popover content shown to the user; the actual popover
content is a copy based on this component. This component is rendered, but
hidden.
This setup results in a few limitations:
- The HTML passed to the Bootstrap plugin is not reactive, so the popover must
be destroyed and reinitialized whenever its content changes. To do so, call
the update() method.
- We can't pass event handlers to the Bootstrap plugin, so don't use Vue event
handling to listen for events. Instead, manually attach event listeners to
the document and use event delegation.
- Since the popover content is rendered here and also shown in the .popover
element, avoid using an id attribute.
These limitations mean that it can be pretty unwieldy from a code perspective to add a popover. In contrast, it's pretty straightforward to add a modal.
This issue is to replace the Bootstrap popover plugin with something else. Moving away from Bootstrap plugins is something we want to do in general: see #984. I used Floating UI to implement our tooltips, and I liked it. I think we should take a look at how hard it would be to replace the Bootstrap plugin with Floating UI.
One issue to keep in mind is getodk/central#797. That issue requires fairly granular control of the placement of the popover. I think Floating UI would give us that control.
The Popover component wraps content that we want to show in a popover, similar to the Modal component. I like that component-based approach, so if there's a way to keep Popover similar to how it is today (in terms of its contract/API/props/slots), I think that'd be nice. However, we'd need to make a number of changes within Popover itself in order to replace the Bootstrap plugin.
The text was updated successfully, but these errors were encountered:
We use popovers in just a couple of ways in Frontend:
FieldKeyList
showsFieldKeyQrPanel
in a popover.FormDraftTesting
showsFormDraftQrPanel
in a popover.HoverCards
shows a popover.We want to do more with popovers. However, because of our use of the Bootstrap popover plugin, there are a number of limitations:
central-frontend/src/components/popover.vue
Lines 14 to 29 in 4158cd0
These limitations mean that it can be pretty unwieldy from a code perspective to add a popover. In contrast, it's pretty straightforward to add a modal.
This issue is to replace the Bootstrap popover plugin with something else. Moving away from Bootstrap plugins is something we want to do in general: see #984. I used Floating UI to implement our tooltips, and I liked it. I think we should take a look at how hard it would be to replace the Bootstrap plugin with Floating UI.
One issue to keep in mind is getodk/central#797. That issue requires fairly granular control of the placement of the popover. I think Floating UI would give us that control.
The
Popover
component wraps content that we want to show in a popover, similar to theModal
component. I like that component-based approach, so if there's a way to keepPopover
similar to how it is today (in terms of its contract/API/props/slots), I think that'd be nice. However, we'd need to make a number of changes withinPopover
itself in order to replace the Bootstrap plugin.The text was updated successfully, but these errors were encountered: