Show drop down menu on mouse over - javafx

Question

I want to create drop down menu like this:
I want when I place the mouse over the text to see combo box which I can use to select a value. When I remove the mouse I want to see simple Label. How I can do this?

Answer 1

Unhovered:
On Hover:
On Click and Choose:
On Choice Complete:
import javafx.application.Application;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class Hoverboard extends Application {
public class TextChooser extends StackPane {
private Label label = new Label();
private ComboBox<String> combo = new ComboBox<>();
public TextChooser(String... options) {
StackPane.setAlignment(label, Pos.CENTER_LEFT);
StackPane.setAlignment(combo, Pos.CENTER_LEFT);
label.textProperty().bind(
combo.getSelectionModel().selectedItemProperty()
);
label.visibleProperty().bind(
combo.visibleProperty().not()
);
label.setPadding(new Insets(0, 0, 0, 9));
combo.getItems().setAll(options);
combo.getSelectionModel().select(0);
combo.setVisible(false);
label.setOnMouseEntered(event -> combo.setVisible(true));
combo.showingProperty().addListener(observable -> {
if (!combo.isShowing()) {
combo.setVisible(false);
}
});
combo.setOnMouseExited(event -> {
if (!combo.isShowing()) {
combo.setVisible(false);
}
});
getChildren().setAll(label, combo);
}
}
#Override
public void start(Stage stage) throws Exception {
TextChooser textChooser = new TextChooser(
"xyzzy", "frobozz", "foobar"
);
VBox layout = new VBox(textChooser);
layout.setPadding(new Insets(10));
stage.setScene(new Scene(layout));
stage.show();
}
public static void main(String[] args) {
launch(Hoverboard.class);
}
}

Answer 2

Here is also css style version: https://github.com/varren/JavaFX-CSS-Styled-ComboBox-Demo
A little bit different from the default one, but you can play with css to get what you want. Default styles can be found in jxrt.jar!/com/sun/javafx/scene/control/skin/caspian/caspian.css
CSS
#changed{
-fx-background-color: transparent;
}
#changed .arrow,
#changed .arrow-button{
-fx-background-color: transparent;
}
/* this part is from default stiles fxrt.jar!/com/sun/javafx/scene/control/skin/caspian/caspian.css */
#changed:hover{
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-radius: 5, 5, 4, 3;
-fx-background-insets: 0 0 -1 0, 0, 1, 2;
-fx-padding: 0;
}
#changed:showing > .arrow-button {
-fx-color: -fx-pressed-base;
}
#changed:hover > .arrow-button > .arrow{
-fx-background-insets: 1 0 -1 0, 0;
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
-fx-shape: "M 0 0 h 7 l -3.5 4 z";
}
JAVA
public class Main extends Application {
#Override
public void start(Stage primaryStage) throws Exception{
HBox root = new HBox();
primaryStage.setTitle("Combo Box Style From Css");
ComboBox combobox = new ComboBox<String>(FXCollections.observableArrayList("One", "Two", "Three"));
combobox.getSelectionModel().select(0);
combobox.setId("changed");
ComboBox normalCombobox = new ComboBox<String>(FXCollections.observableArrayList("One", "Two", "Three"));
normalCombobox.getSelectionModel().select(0);
root.getChildren().addAll(combobox, normalCombobox);
Scene scene = new Scene(root, 300, 275);
scene.setFill(Color.WHITE);
String css = Main.class.getResource("styles.css").toExternalForm();
scene.getStylesheets().clear();
scene.getStylesheets().add(css);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
DEMO

Answer 3

Two potential approaches:
Try to use CSS to modify the look of the ComboBox so it looks like a normal text field; hide the arrow and border, and re-show them on :hover. You'll want to lookup the CSS reference for ComboBox: http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#combobox
Use a normal TextField, and display a border (and arrow) on :hover. Attach a mouse-listener to the TextField to display a PopupControl on mouse click. Put a ListView inside the PopupControl so it behaves like a ComboBox. You'll need to create a class that implements Skin for your popup control. You should be able to find some examples on the web.