JavaFX Show a pane on Mouse hover

Question

I have a JavaFX application where i want to show a pane on mousehover event on a Button,

The output i am expecting is similar to windows taskbar preview style, where on hovering the TaskBar icons a preview pane is shown on top. (like below)

how can i achieve this effect using JavaFX.

Answer 1

As @Przemek mentioned, there can be many ways to approach this requirement. Apart from @Przemek implementation, the other way is to use the Popup control.

Below is the modified code of @Przemek with Popup implementation.

import javafx.application.Application;
import javafx.geometry.Bounds;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.layout.Region;
import javafx.scene.layout.StackPane;
import javafx.stage.Popup;
import javafx.stage.Stage;

public class StickyNotesApp extends Application {

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

    @Override
    public void start(Stage stage) throws Exception {
        StackPane notedPane = new StackPane();
        notedPane.setPrefSize(20, 20);
        notedPane.setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
        notedPane.setStyle("-fx-background-color: purple;");

        StackPane rootPane = new StackPane(notedPane);
        rootPane.setPrefSize(400, 400);
        StackPane.setAlignment(notedPane, Pos.BOTTOM_CENTER);

        stage.setScene(new Scene(rootPane));
        stage.show();

        StackPane stickyNotesPane = new StackPane();
        stickyNotesPane.setPrefSize(200, 200);
        stickyNotesPane.setStyle("-fx-background-color: yellow;");

        Popup popup = new Popup();
        popup.getContent().add(stickyNotesPane);

        notedPane.hoverProperty().addListener((obs, oldVal, newValue) -> {
            if (newValue) {
                Bounds bnds = notedPane.localToScreen(notedPane.getLayoutBounds());
                double x = bnds.getMinX() - (stickyNotesPane.getWidth() / 2) + (notedPane.getWidth() / 2);
                double y = bnds.getMinY() - stickyNotesPane.getHeight();
                popup.show(notedPane, x, y);
            } else {
                popup.hide();
            }
        });
    }
}

Answer 2

Code is very raw but gets the core feature you asked for (of course it can be achived in more than one way, depening on needs, I've just published the solution which was the fastest to implement for me)

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.layout.Region;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

public class StickyNotesApp extends Application {

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

    @Override
    public void start(Stage stage) throws Exception {
        StackPane notedPane = new StackPane();
        notedPane.setPrefSize(20, 20);
        notedPane.setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
        notedPane.setStyle("-fx-background-color: purple;");

        StackPane rootPane = new StackPane(notedPane);
        rootPane.setPrefSize(400, 400);
        StackPane.setAlignment(notedPane, Pos.BOTTOM_CENTER);

        stage.setScene(new Scene(rootPane));
        stage.show();

        Stage stickyNotesStage = new Stage();
        stickyNotesStage.initOwner(stage);
        stickyNotesStage.initStyle(StageStyle.UNDECORATED);
        StackPane stickyNotesPane = new StackPane();
        stickyNotesPane.setPrefSize(200, 200);
        stickyNotesPane.setStyle("-fx-background-color: yellow;");
        stickyNotesStage.setScene(new Scene(stickyNotesPane));


        notedPane.hoverProperty().addListener((ChangeListener<Boolean>) (observable, oldValue, newValue) -> {
            if (newValue) {
                stickyNotesStage.show();
            } else {
                stickyNotesStage.hide();
            }
        });
    }
}