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

Question

In JavaFX subclasses of Control have a tooltip property which means that one can declaratively add a Tooltip using FXML thusly:

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

This is possible only because CheckBox is a subclass of Control.

However, I would like to be able to add a tooltip to any scene-graph Node using FXML (i.e. without having to programatically add the tooltip using Java).

brcolow · Accepted Answer · 2016-05-20T19:58:59.070

There is an 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>

Even though the ScrollPane has a transparent background, there is still a visible white-box behind the question mark graphic:

There is a way around this, and that is to utilize the power of <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>

Note that the fx:id of the ImageView is referenced inside of the script (I did not see this functionality documented anywhere and only found it through experimentation - which in fact prompted me to post this Q&A in the hope that others would find it useful). The results look like:

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

1 Answers1

Linked