JavaFX Tooltip Tutorial

1- JavaFX Tooltip

JavaFX Tooltip is the UI component used to display additional information for other component when you move the mouse over the surface of the component.
TextField field_userName= new TextField();

Tooltip tooltip_userName=new Tooltip("Enter user name");

// Set tooltip
field_userName.setTooltip(tooltip_userName);

// Or using Tooltip.install
Tooltip.install(field_userName, tooltip_userName);

// Uninstall tooltip
Tooltip.uninstall(field_userName, tooltip_userName);
 

2- Tooltip Example

TooltipDemo.java
package org.o7planning.javafx.tooltip;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.control.Tooltip;
import javafx.scene.layout.GridPane;
import javafx.stage.PopupWindow.AnchorLocation;
import javafx.stage.Stage;

public class TooltipDemo  extends Application {

   @Override
   public void start(Stage stage) {

       GridPane root= new GridPane();
       root.setHgap(5);
       root.setVgap(5);
       root.setPadding(new Insets(5));
     
       // User Name
       root.add(new Label("User Name"), 0, 0);
       TextField field_userName= new TextField();
       root.add(field_userName, 1, 0);
     
       Tooltip tooltip_userName=new Tooltip("Enter user name");
       field_userName.setTooltip(tooltip_userName);
     
     
       // Password
       root.add(new Label("Password"), 0, 1);
       PasswordField field_password= new PasswordField();
     
       Tooltip tooltip_password=new Tooltip("Enter Password");
       field_password.setTooltip(tooltip_password);
     
       root.add(field_password, 1, 1);
     
     
       // Create a Button
       Button button_login = new Button("Submit");
       Tooltip tooltip_login =new Tooltip("Login to Application");
     
       // Set Location to display tooltip.
       tooltip_login.setAnchorLocation(AnchorLocation.WINDOW_BOTTOM_LEFT);
       button_login.setTooltip(tooltip_login);
     
     
       root.add(button_login, 1, 2);      
       
     
     
       Scene scene = new Scene(root, 350, 200);        

       stage.setTitle("Tooltip Demo (o7planning.org)");
       stage.setScene(scene);
       stage.show();
   }

   public static void main(String[] args) {
       Application.launch(args);
   }
 
}
Running the example:

3- Displaying HTML content in the tooltip

TooltipHtmlDemo.java
package org.o7planning.javafx.tooltip;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.Tooltip;
import javafx.scene.layout.FlowPane;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;


public class TooltipHtmlDemo extends Application {

   @Override
   public void start(Stage stage) {

       FlowPane root = new FlowPane();
       root.setHgap(5);
       root.setVgap(5);
       root.setPadding(new Insets(25));

       // Create a Button
       Button button = new Button("Button");
   
       // A browser.
       WebView  webView = new WebView();
       WebEngine webEngine = webView.getEngine();
       webEngine.loadContent
       (
            "<h3>Note:</h3> This is a Button"
       );

       Tooltip  tooltip = new Tooltip();
       tooltip.setPrefSize(200, 100);
       tooltip.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
     
       // Set tooltip content
       tooltip.setGraphic(webView);

       // Install tooltip for button (same as button.setTooltip)
       Tooltip.install(button, tooltip);

       root.getChildren().add(button);

       Scene scene = new Scene(root, 350, 200);

       stage.setTitle("Tooltip Html Demo (o7planning.org)");
       stage.setScene(scene);
       stage.show();
   }

   public static void main(String[] args) {
       Application.launch(args);
   }

}
Running the example:

4- Displaying Graphics content in the tooltip

Tooltip allows to display Graphics on its contents via tooltip.setGraphic() method.
// tooltip.setGraphic(Node):

tooltip.setGraphic(new Button("This is a button in tooltip"));
Example:
TooltipGraphicDemo.java
package org.o7planning.javafx.tooltip;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.Tooltip;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;

public class TooltipGraphicDemo extends Application {

    @Override
    public void start(Stage stage) {

        FlowPane root = new FlowPane();
        root.setHgap(5);
        root.setVgap(5);
        root.setPadding(new Insets(25));

        // Create a Button
        Button button = new Button("Button");

        Tooltip tooltip = new Tooltip();
        tooltip.setPrefSize(200, 100);
        tooltip.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);

        // Set tooltip content
        tooltip.setGraphic(new Button("Button in a Tooltip"));

        // Install tooltip for button (same as button.setTooltip)
        Tooltip.install(button, tooltip);

        root.getChildren().add(button);

        Scene scene = new Scene(root, 350, 200);

        stage.setTitle("Tooltip Graphic Demo (o7planning.org)");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        Application.launch(args);
    }

}
Running the example: