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

如何解决vaadin 工具提示未显示在对话框中

有一个继承自 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

解决方法

作为临时解决方案，在 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');"
            + "};");