vaadin 工具提示未显示在对话框中

Question

有一个继承自 VerticalLayout 的 baseview 类，其中创建了一个 TextField 和 Tooltip，并绑定到一个 TextField。在继承自 Dialog 的类中使用 baseview 时，不显示工具提示。

示例： UPD：将示例更新为更轻的示例

@Route(value = "Future", layout = MainLayout.class)
@RouteAlias(value = "/Future", layout = MainLayout.class)
public class FutureView extends VerticalLayout {

    BaseForm form;
    public FutureView() {
        form = new BaseForm();
        this.setSizeFull();
        form.open();
        
        Button btn = new Button("Open form");
        btn.addClickListener(e->form.open());
        
        add(btn,form);
    }
}

class BaseForm extends Dialog {
    Tooltip tooltip;
    TextField text;
    
    public BaseForm() {
        text= new TextField();
        text.setReadOnly(true);
    
        tooltip= new Tooltip();
        tooltip.attachToComponent(text);
        tooltip.add(new Span("Some"));
        add(text,tooltip);
    }
}

如果在构造函数中打开表单，则工具提示有效，但如果您关闭并重新打开表单，它将停止工作

工具提示：https://vaadin.com/directory/component/tooltip

Answer 1

作为临时解决方案，使用 BaseForm.java 类中的脚本帮助了我。

如果没有在构造函数中打开表单，脚本将无法运行

text.setId("target");
tooltip.setId("tooltip");
UI.getCurrent().getPage().executeJs("document.getElementById('target').onmouseover = function(){"
            + "document.getElementById('tooltip').removeAttribute('hidden');"
            + "};"
            + "document.getElementById('target').onmouseleave = function(){"
            + "document.getElementById('tooltip').setAttribute('hidden', 'true');"
            + "};"
            + "window.onload = function(){"
            + "document.getElementById('overlay').removeAttribute('opened');"
            + "document.getElementById('overlay').setAttribute('closing', 'true');"
            + "};");