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).
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: