如何向未使用 FXML 实现 Control 的节点添加工具提示?

How can I add a tooltip to a node that does not implement Control using FXML?

Control have a tooltip property which means that one can declaratively add a Tooltip 的 JavaFX 子类中这样使用 FXML:

<CheckBox fx:id="someCheckBox" mnemonicParsing="false" text="Do It?">
    <tooltip>
        <Tooltip text="Whether or not to do it."/>
    </tooltip>
</CheckBox>

这是可能的,因为 CheckBox 是 Control 的子类。

但是,我希望能够使用 FXML 向任何场景图节点添加工具提示(即无需使用 Java 以编程方式添加工具提示)。

有一个archived discussion on the Oracle Community Forum that suggests wrapping the Node inside of a ScrollPane and setting the Tooltip on the ScrollPane. This is less than ideal though as it adds an unnecessary Node to the scene-graph but more importantly does not work well in all scenarios. Consider trying to add a Tooltip to the graphic of a TitledPane:

<TitledPane text="My TitledPane" fx:id="someTitledPane" expanded="true" contentDisplay="RIGHT">
    <graphic>
        <ScrollPane fitToWidth="true" fitToHeight="true" style="-fx-background-color: rgba(255, 255, 255, 0);">
            <ImageView fitWidth="24.0" fitHeight="24.0" preserveRatio="true" pickOnBounds="true">
            <image>
                <Image url="/images/questionMark.jpg" />
            </image>
            </ImageView>
        <tooltip>
            <Tooltip text="My tooltip."/>
        </tooltip>
        </ScrollPane>
    </graphic>
    <Label text="Hello!"/>
</TitledPane>

即使 ScrollPane 具有透明背景,问号图形后面仍然有一个可见的白框:

有一个方法可以解决这个问题,那就是利用 <fx:script>:

的力量
<?language javascript?>

<TitledPane text="My TitledPane" fx:id="someTitledPane" expanded="true" contentDisplay="RIGHT">
    <graphic>
        <ImageView fx:id="questionMarkImageView" fitWidth="24.0" fitHeight="24.0" preserveRatio="true" pickOnBounds="true">
        <image>
            <Image url="/images/questionMark.jpg" />
        </image>
        </ImageView>
        <fx:script>
            var tooltip = new javafx.scene.control.Tooltip('My tooltip');
            javafx.scene.control.Tooltip.install(questionMarkImageView, tooltip);
        </fx:script>
    </graphic>
    <Label text="Hello!"/>
</TitledPane>

请注意,ImageView 的 fx:id 是在脚本内部引用的(我没有在任何地方看到此功能的文档,只是通过实验发现的 - 这实际上促使我 post 这个问答,希望其他人会发现它有用)。结果如下: