DEV Community: victor hugo gaspar quinn

How make Tool Tips on JavaFx?

victor hugo gaspar quinn — Tue, 18 Mar 2025 20:42:42 +0000

Tooltipsare common components in web developments, in this case, I will show you how you could create tool tips in JavaFx using FxPopup, JavaFxadds tool tips to its collection of components, however, these have the drawback that they are not compatible with all types of components

<dependency>
    <groupId>io.github.hugoquinn2</groupId>
    <artifactId>fxpopup</artifactId>
    <version>1.2.0</version>
</dependency>

As a great advantage, all CSS styles are applied to the main scene, so following the following XML structure, you can apply your own styles.

ToolTip (.tool-tip) 
├── Label (.tool-tip-label)

Social media buttons

// Create Social media buttons  
Button youtube = new Button();  
Button gitHub = new Button();  
Button twitter = new Button();  
Button whatsapp = new Button();  

// Apply styles and icons  
youtube.getStyleClass().add("youtube-button");  
gitHub.getStyleClass().add("github-button");  
twitter.getStyleClass().add("twitter-button");  
whatsapp.getStyleClass().add("whatsapp-button");  

youtube.setGraphic(new FontIcon("anto-youtube"));  
gitHub.setGraphic(new FontIcon("anto-github"));  
twitter.setGraphic(new FontIcon("anto-twitter"));  
whatsapp.setGraphic(new FontIcon("anto-whats-app"));  

// Create tool tips for buttons  
ToolTip toolTipYoutube = new ToolTip("Youtube", youtube, HPos.LEFT);  
ToolTip toolTipGitHub = new ToolTip("GitHub", gitHub, VPos.TOP);  
ToolTip toolTipTwitter = new ToolTip("Twitter", twitter, VPos.BOTTOM);  
ToolTip toolTipWhatsapp = new ToolTip("Whatsapp", whatsapp, HPos.RIGHT);

User Card

// Create User Card  
ImageView userProfileImage = new ImageView("https://th.bing.com/th/id/OIP.gxCrcJ9wcnuS-hppF4l8ggHaHa?rs=1&pid=ImgDetMain");  

// Cut user Image to a circle  
userProfileImage.setFitWidth(100);  
userProfileImage.setPreserveRatio(true);  

double w = userProfileImage.getFitWidth();  
double h = userProfileImage.getFitHeight();  
double size = Math.min(w, h);  
double x = (w - size) / 2;  
double y = (h - size) / 2;  
double radius = w / 2;  

userProfileImage.setViewport(new Rectangle2D(x, y, size, size));  
userProfileImage.setClip(new Circle(radius, radius, radius));  

// Make custom Tool Tip  
ToolTip toolTip = new ToolTip("Sophia Martinez", userProfileImage, HPos.RIGHT, 15);  
Label description = new Label("Human Resources Manager, People & Culture Department");  
toolTip.getChildren().addAll(description);  

// Apply styles  
toolTip.setMaxWidth(180);  
toolTip.setMinWidth(180);  
toolTip.setAlignment(Pos.CENTER_LEFT);  

description.setWrapText(true);  
toolTip.getText().setStyle("-fx-font-weight: bold;");

How make Thumbnails on JavaFX?

victor hugo gaspar quinn — Mon, 27 Jan 2025 19:02:14 +0000

A Thumbnail is an image that when clicked, it is shown much larger on the screen with an overlay to highlight the image and its details, here you can see an interactive example: W3 School thumbnails

Thumbnails are very common in web pages, in this case, I will show you how to create these thumbnails in JavaFx desktop application, for this we will require the latest version of FxPopup, a library to create popups and more in your application

<dependency>
    <groupId>io.github.hugoquinn2</groupId>
    <artifactId>fxpopup</artifactId>
    <version>1.1.0</version>
</dependency>

Thumbnails were added to FxPopup starting with version v1.2.0

Makin a simple Thumbnail

To create a simple thumbnail we will only require an overlay and an image, with the following example you can create a thumbail

Rectangle overlay;
FxPopup fxPopup;
ImageView imageView;

    @FXML
    public void initialize() {
            // FxPopup object
        fxPopup = new FxPopup();

        // Image example
        imageView = new ImageView("https://th.bing.com/th/id/OIP.TnnO-9C6THhBBCzOhTe7mQHaFj?rs=1&pid=ImgDetMain");

        // Making a Overlay
        overlay = new Rectangle();
        overlay.setFill(Color.BLACK);
        overlay.setOpacity(0.3);

        // Remove image and overlay when the overlay is clicked
        overlay.setOnMouseClicked(event -> {
            MasterUtils.remove(imageView);
            MasterUtils.remove(overlay);
        });
    }

    @FXML
    protected void onThumbnails() {
            // Show overlay before image
        fxPopup.show(overlay, Pos.CENTER);

        // Bind Overlay with root, for max size
        overlay.widthProperty().bind(((Pane) MasterUtils.getRoot()).widthProperty());
        overlay.heightProperty().bind(((Pane) MasterUtils.getRoot()).heightProperty());

        // Show image above Overlay
        fxPopup.show(imageView, Pos.CENTER);
    }

Although this code is enough to create thumbnails, we can improve this by making all images always have this thumnails

Making a Custom `ImageView` for Thumbnails

we're going to create our own controller using FxPopup, so when creating this object it will always have the option to show the thumbnail of the image

public class ThumbnailImage extends ImageView {
    // Thumbnail Structure
    Rectangle overlay;
    FxPopup fxPopup;
    ImageView thumbImage;

    // Thumbnail config
    double scaleThumbImage = 0.6;
    double overlayOpacity = 0.3;
    Color overlayColor = Color.BLACK;

    // Thumbnail classes for CSS styles
    String DEFAULT_CLASS_OVERLAY = "overlay";
    String DEFAULT_THUMB_IMAGE = "thumb-image";

    // Constructor null, path and Image, for customization
    public ThumbnailImage() {this(null, null);}
    public ThumbnailImage(String s) {this(s, null);}
    public ThumbnailImage(Image image) {this(null, image);}

    // General constructor class
    private ThumbnailImage(String s, Image image) {
        fxPopup = new FxPopup();
        thumbImage = new ImageView();
        overlay = new Rectangle();

        // Set classes
        thumbImage.getStyleClass().add(DEFAULT_THUMB_IMAGE);
        overlay.getStyleClass().add(DEFAULT_CLASS_OVERLAY);

        if (s != null) {
            this.setImage(new Image(s));
            thumbImage.setImage(new Image(s));
        }
        else if (image != null) {
            this.setImage(image);
            thumbImage.setImage(image);
        }

        // Overlay config
        overlay.setFill(overlayColor);
        overlay.setOpacity(overlayOpacity);

        setThumbnail();
    }

    private void setThumbnail() {
        overlay.setOnMouseClicked(event -> {
            MasterUtils.remove(thumbImage);
            MasterUtils.remove(overlay);
        });

        setOnMouseClicked(event -> {
            Rectangle2D screenBounds = Screen.getPrimary().getBounds();
            double screenWidth = screenBounds.getWidth();
            double thumImageWidth = screenWidth * scaleThumbImage;

            // Show overlay before image
            fxPopup.show(overlay, Pos.CENTER);

            // Bind Overlay with root, for max size
            overlay.widthProperty().bind(((Pane) MasterUtils.getRoot()).widthProperty());
            overlay.heightProperty().bind(((Pane) MasterUtils.getRoot()).heightProperty());

            // Resize image to 80% size windows and preserve ratio
            thumbImage.setFitWidth(thumImageWidth);
            thumbImage.setPreserveRatio(true);

            // Show image above Overlay
            fxPopup.show(thumbImage, Pos.CENTER);
        });
    }

    // Getters and Setters functions for customization
    public double getScaleThumbImage() {
        return scaleThumbImage;
    }

    public void setScaleThumbImage(double scaleThumbImage) {
        this.scaleThumbImage = scaleThumbImage;

    }

    public double getOverlayOpacity() {
        return overlayOpacity;
    }

    public void setOverlayOpacity(double overlayOpacity) {
        this.overlayOpacity = overlayOpacity;
    }

    public Color getOverlayColor() {
        return overlayColor;
    }

    public void setOverlayColor(Color overlayColor) {
        this.overlayColor = overlayColor;
    }
}

With our new controller it is now enough to create multiple objects and add them wherever we want, as in the following example

@FXML
    public void initialize() {
        ImageView imageView = new ThumbnailImage("https://shorturl.at/Ymi2B");
        ImageView imageView2 = new ThumbnailImage("https://shorturl.at/1Lr99");
        ImageView imageView3 = new ThumbnailImage("https://shorturl.at/cSuFt");
        ImageView imageView4 = new ThumbnailImage("https://shorturl.at/SNygg");

        imageView.setFitWidth(150);
        imageView2.setFitWidth(150);
        imageView3.setFitWidth(150);
        imageView4.setFitWidth(150);

        imageView.setPreserveRatio(true);
        imageView2.setPreserveRatio(true);
        imageView3.setPreserveRatio(true);
        imageView4.setPreserveRatio(true);

        root.getChildren().addAll(imageView, imageView2, imageView3, imageView4);
    }

Give your app a modern look with FxPopup

victor hugo gaspar quinn — Sun, 05 Jan 2025 22:38:11 +0000

FxPopup is a JavaFx library to display popup messages and generate automatic forms, the same library includes light and dark styles compatible with all applications.