问题

以下是翻译好的部分：

我有一个 Vaadin 23 应用程序，以下是为文本区域设置工具提示的代码：

textAreaDescription = UiFactory.createTextArea();
textAreaDescription.setClassName("sp-tooltip");

Tooltip tooltip = Tooltip.forComponent(textAreaDescription)
         .withText(textAreaDescription.getValue())
         .withPosition(Tooltip.TooltipPosition.TOP_START);

这是 vaadin-tooltip-overlay.css：

:host(.sp-tooltip) [part="overlay"] {
   width: 80em !important;
   height: 30em !important;
   color: #c9c9c9;
   background-color: #474747;
   white-space: pre-line;
}

这似乎不起作用。如果我从覆盖层中删除 (.sp-tooltip)，那么我可以看到更改生效，但我只想将其应用于具有 sp-tooltip 设置的组件。我无法为工具提示本身设置类或获取元素，那么我该如何实现这一点？

谢谢和最好的问候
Matt

textAreaDescription = UiFactory.createTextArea();
textAreaDescription.setClassName("sp-tooltip");
 
Tooltip tooltip = Tooltip.forComponent(textAreaDescription)
         .withText(textAreaDescription.getValue())
         .withPosition(Tooltip.TooltipPosition.TOP_START);

:host(.sp-tooltip) [part="overlay"] {
   width: 80em !important;
   height: 30em !important;
   color: #c9c9c9;
   background-color: #474747;
   white-space: pre-line;
}

答案1

得分: 2

这在Tooltip Java API中目前还不可用。但是可以使用JavaScript调用来实现，这并不是完全直接的，因为有两种情况下vaadin-tooltip元素实际上位于不同位置。

如果使用textField.setTooltipText("Tooltip text") API，该元素将放置在TextField本身内的tooltip插槽中。但是，如果使用Tooltip tooltip = Tooltip.forComponent(textField).withText("Tooltip text")，则tooltip元素是文档的子元素，并且通过ID进行映射。因此，JavaScript需要考虑这两种选项。以下是用于此任务的通用实用函数。

public static void setTooltipClassName(Component comp, String className) {
    comp.getElement().executeJs(
    """
        if ($0.getElementsByTagName('vaadin-tooltip').length == 1) {
            $0.getElementsByTagName('vaadin-tooltip')[0]._overlayElement.setAttribute('class',$1);
        } else {
            const tooltips = document.getElementsByTagName('vaadin-tooltip');
            for (let i=0; i<tooltips.length; i++ ) {
                const tooltip = tooltips[i];
                if (tooltip._overlayElement.id === $0.getAttribute('aria-describedBy')) {
                    tooltip._overlayElement.setAttribute('class',$1)
                }
            }
        }
    """, comp.getElement(), className);
}

<details>
<summary>英文:</summary>

[This is simply not available in Tooltip Java API yet][1]. But one can do this with a JavaScript call, which is not entirely straightforward as there are two options where the `vaadin-tooltip` element actually is.

If one uses `textField.setTooltipText(&quot;Tooltip text&quot;)` API, the element is placed in tooltip slot inside TextField itself. But if you use `Tooltip tooltip = Tooltip.forComponent(textField).withText(&quot;Tooltip text&quot;)` the tooltip element is child of the document and mapped by id. So the JavaScript needs to take the both options into account. Here is generally usable utility function for the task.

    public static void setTooltipClassName(Component comp, String className) {
        comp.getElement().executeJs(
        &quot;&quot;&quot;
            if ($0.getElementsByTagName(&#39;vaadin-tooltip&#39;).length == 1) {
                $0.getElementsByTagName(&#39;vaadin-tooltip&#39;)[0]._overlayElement.setAttribute(&#39;class&#39;,$1);
            } else {
                const tooltips = document.getElementsByTagName(&#39;vaadin-tooltip&#39;);
                for (let i=0; i&lt;tooltips.length; i++ ) {
                    const tooltip = tooltips[i];
                    if (tooltip._overlayElement.id === $0.getAttribute(&#39;aria-describedBy&#39;)) {
                        tooltip._overlayElement.setAttribute(&#39;class&#39;,$1)
                    }
                }
            }
         &quot;&quot;&quot;, comp.getElement(), className);
    }


  [1]: https://github.com/vaadin/flow-components/issues/4482

</details>