Search code examples
javajavafxtooltip

Tooltip is shown on every polygon


I have a tooltip installed on my pane that is supposed to only be shown on a certain Polygon (the last one). But instead the tooltip is shown on every tile. How can I change that? Based on this code, here is a reproducible example.

package com.example.demo1;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.control.Tooltip;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Polygon;
import javafx.stage.Stage;

import java.io.IOException;

public class HelloApplication extends Application {

    private final static int WINDOW_WIDTH = 800;
    private final static int WINDOW_HEIGHT = 600;

    private final static double r = 20; // the inner radius from hexagon center to outer corner
    private final static double n = Math.sqrt(r * r * 0.75); // the inner radius from hexagon center to middle of the axis
    private final static double TILE_HEIGHT = 2 * r;
    private final static double TILE_WIDTH = 2 * n;
    @Override
    public void start(Stage stage) throws IOException {
        Pane tileMap = new Pane();
        Tooltip tooltip = new Tooltip();
        int rowCount = 4; // how many rows of tiles should be created
        int tilesPerRow = 6; // the amount of tiles that are contained in each row
        int xStartOffset = 40; // offsets the entire field to the right
        int yStartOffset = 40; // offsets the entire field downwards

        Polygon tile = null;
        for (int x = 0; x < tilesPerRow; x++) {
            for (int y = 0; y < rowCount; y++) {
                double xCoord = x * TILE_WIDTH + (y % 2) * n + xStartOffset;
                double yCoord = y * TILE_HEIGHT * 0.75 + yStartOffset;

                tile = new Tile(xCoord, yCoord);
                tileMap.getChildren().add(tile);
            }
        }
        final Polygon lastTile = tile;
        Tooltip.install(tileMap, tooltip);
        tileMap.addEventHandler(MouseEvent.MOUSE_MOVED, mouseEvent -> {
            if (lastTile.intersects(mouseEvent.getX(), mouseEvent.getY(), 1, 1)) {
                tooltip.setText("test");
            }
            else {
                tooltip.hide();
            }
        });
        BorderPane pane = new BorderPane();
        pane.setCenter(tileMap);
        Scene content = new Scene(pane, WINDOW_WIDTH, WINDOW_HEIGHT);
        stage.setScene(content);
        stage.show();
    }

    private class Tile extends Polygon {
        Tile(double x, double y) {
            // creates the polygon using the corner coordinates
            getPoints().addAll(
                    x, y,
                    x, y + r,
                    x + n, y + r * 1.5,
                    x + TILE_WIDTH, y + r,
                    x + TILE_WIDTH, y,
                    x + n, y - r * 0.5
            );

            // set up the visuals and a click listener for the tile
            setFill(Color.ANTIQUEWHITE);
            setStrokeWidth(1);
            setStroke(Color.BLACK);
            setOnMouseClicked(e -> System.out.println("Clicked: " + this));
        }
    }

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

I would like to add more details that are not code, but I can't think of any right now. Yet the editor is forcing me to write more text.


Solution

  • As suggested here and here, each Tile can have its own, unique tooltip. Starting from this example, the variation below simply adds a new Tooltip as each Tile is constructed. For concreteness, the tooltip and mouse handler simply display the hexagon's coordinates. In practice, the tooltip's content and visibility would be conditioned based on the program's model, as shown here.

    Tooltip on Hexagon

    import java.text.NumberFormat;
    import javafx.application.Application;
    import javafx.scene.Scene;
    import javafx.scene.control.Tooltip;
    import javafx.scene.layout.Pane;
    import javafx.scene.paint.Color;
    import javafx.scene.shape.Polygon;
    import javafx.stage.Stage;
    
    /**
     * https://stackoverflow.com/a/78966955/230513
     * https://stackoverflow.com/a/54173321/230513
     */
    public class UISolution extends Application {
    
        // the inner radius from hexagon center to outer corner
        private final static double R = 48;
        // the inner radius from hexagon center to middle of the axis
        private final static double N = Math.sqrt(R * R * 0.75);
        private final static double TILE_HEIGHT = 2 * R;
        private final static double TILE_WIDTH = 2 * N;
        private static final int ROW_COUNT = 4;
        private static final int TILES_PER_ROW = 6;
        private final static int WINDOW_WIDTH = (2 * TILES_PER_ROW + 1) * (int) R;
        private final static int WINDOW_HEIGHT = (2 * ROW_COUNT + 1) * (int) N;
    
        public static void main(String[] args) {
            launch(args);
        }
    
        @Override
        public void start(Stage primaryStage) {
            Pane tileMap = new Pane();
            Scene content = new Scene(tileMap, WINDOW_WIDTH, WINDOW_HEIGHT);
            primaryStage.setScene(content);
    
            int xStartOffset = (int) R; // offsets the entire field to the right
            int yStartOffset = (int) R; // offsets the entire fiels downwards
    
            for (int x = 0; x < TILES_PER_ROW; x++) {
                for (int y = 0; y < ROW_COUNT; y++) {
                    double xCoord = x * TILE_WIDTH + (y % 2) * N + xStartOffset;
                    double yCoord = y * TILE_HEIGHT * 0.75 + yStartOffset;
                    Polygon tile = new Tile(xCoord, yCoord);
                    tileMap.getChildren().add(tile);
                }
            }
            primaryStage.show();
        }
    
        private class Tile extends Polygon {
    
            private static final NumberFormat F = NumberFormat.getCompactNumberInstance();
    
            Tile(double x, double y) {
                // creates the polygon using the corner coordinates
                getPoints().addAll(
                    x, y,
                    x, y + R,
                    x + N, y + R * 1.5,
                    x + TILE_WIDTH, y + R,
                    x + TILE_WIDTH, y,
                    x + N, y - R * 0.5
                );
                // set up the visuals and a click listener for the tile
                setFill(Color.ANTIQUEWHITE);
                setStrokeWidth(2);
                setStroke(Color.BLACK);
                String s = "x = " + F.format(x) + ", y = " + F.format(y);
                setOnMouseClicked(e -> System.out.println("Clicked: " + s));
                Tooltip.install(this, new Tooltip(s));
            }
        }
    }