Change Color of Controls FX PopOver Title

Question

Would like to change the color of a controls FX PopOver title which is set to always be on. I would like to do this in CSS, where I have already changed the background color. I have tried a couple of different options under .popover.

This is an example with the CSS of the last thing I tried:

public class HelloPopOver extends Application {

    @Override
    public void start(Stage primaryStage) {


        //Build PopOver look and feel
        Label lblName = new Label("John Doe");
        Label lblStreet = new Label("123 Hello Street");
        Label lblCityStateZip = new Label("MadeUpCity, XX 55555");   
        VBox vBox = new VBox(lblName, lblStreet, lblCityStateZip);
        //Create PopOver and add look and feel
        PopOver popOver = new PopOver(vBox);

        // I always want to see my header
        popOver.setHeaderAlwaysVisible(true);

        Label label = new Label("Mouse mouse over me");
        label.setOnMouseEntered(mouseEvent -> {
            popOver.show(label);
            ((Parent)popOver.getSkin().getNode()).getStylesheets().add(getClass().getResource("Style.css").toExternalForm());
        });


        StackPane root = new StackPane();
        root.getChildren().add(label);

        Scene scene = new Scene(root, 300, 250);

        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }


    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
   }    
}

And the CSS:

.popover > .border {
    -fx-stroke-width: 0.5;
    -fx-fill: rgba(200,200,200, 1);
    -fx-text-fill: red; /* This doesn't work, but is what I am looking for */
}
.popover > .label {
    -fx-text-fill: red; /* This doesn't work, but is what I am looking for */
 }

How can CSS change the title color to red?

Answer 1

I had the same problem and figured it out by taking a look into the popover.css file in org.controlsfx.control .

This should do the trick:

.popover > .content > .title > .text  {
    -fx-text-fill: red;
}

Answer 2

Here is a very rough example of how you can create your own header. I personally would use an AwesomeFontFx icon in place of the button. I would also center the header and add spacing. I used Text as the header. Text allows you to change its color.

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Control;
import javafx.scene.control.Label;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import org.controlsfx.control.PopOver;

public class HelloPopOver extends Application {

    @Override
    public void start(Stage primaryStage) {


        //Build PopOver look and feel 



        Label lblClosePopOver = new Label("x");
        Text lblHeader = new Text("Keyword info");
        lblHeader.setFill(Color.RED);
        HBox headerRoot = new HBox(lblClosePopOver, lblHeader);
        headerRoot.setMaxSize(Control.USE_PREF_SIZE, Control.USE_PREF_SIZE);
        Label lblName = new Label("John Doe");
        Label lblStreet = new Label("123 Hello Street");
        Label lblCityStateZip = new Label("MadeUpCity, XX 55555");  

        VBox infoHolder = new VBox(lblName, lblStreet, lblCityStateZip);
        VBox.setMargin(infoHolder, new Insets(7, 7, 7, 7));
        VBox subRoot = new VBox(new StackPane(headerRoot), infoHolder);
        AnchorPane popOverRoot = new AnchorPane(subRoot);


        //Create PopOver and add look and feel
         Label label = new Label("Mouse mouse over me");
        PopOver popOver = new PopOver(label);
        popOver.setContentNode(popOverRoot);
        lblClosePopOver.setOnMouseClicked((event)->{
            if(popOver.isShowing())
            {
                popOver.hide();
            }
        });
    // I always want to see my header        
    //popOver.setHeaderAlwaysVisible(true);


        label.setOnMouseEntered(mouseEvent -> {
            popOver.show(label);
        });


    StackPane root = new StackPane();
    root.getChildren().add(label);

    Scene scene = new Scene(root, 300, 250);


        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }


    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
   }    
}