I have encountered a issue and I’m not sure whether I have not set something correctly or if it’s an error or something unexpected.
I want to display different pieces of information simultaneously and have them remain visible. This isn’t possible with a tooltip, so I’m using popovers instead.
That worked very well. Now, the idea is to display this element in a dialog to better access the information.
It also works without any issues, but it should be modeless and draggable. The issue is related to the modeless of the dialog. When the dialog is moved, the popover goes to the background.
This is the code for the example:
public class TestView extends HorizontalLayout {
public TestView() {
final Button open = new Button("Open");
open.addClickListener(e -> {
final var dialog = new Dialog();
dialog.setModal(false);
dialog.setDraggable(true);
final var icon = VaadinIcon.INFO_CIRCLE.create();
dialog.add(icon);
final var popover = new Popover(VaadinIcon.INFO_CIRCLE.create(), new Text("This is a info text with icon."));
popover.setTarget(icon);
dialog.open();
});
add(open);
}
}
With the following code, I’ve found a way to close the popover before moving the dialog.
popover.setModal(true, false);
That’s not my goal, as I want to keep the information open and have multiple pieces visible simultaneously.
During testing, I also noticed issues when using hover:
popover.setOpenOnHover(true);
For example, when I use it as a tooltip with an icon. It also briefly jumps to the back, which doesn’t look good in my opinion:
I haven’t found a solution for this yet, so I’m assuming I might have done something wrong. I would appreciate any help.
The example was created with the Vaadin starter for version 24.7 (pre) to ensure the issue still exists. It also doesn’t work with version 24.6.