How customize a tooltip with css? - css

Question

I am using the version javafx 2 with kepler and I tried to customized a tooltip without succeed:
.tooltip{
-fx-background-color: linear-gradient(blue,lightskyblue);
-fx-background-radius: 5;
}
.page-corner {
-fx-shape: " ";
}
It is not working. Do you have any ideas ?
Update:
here an mcve :
import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;
public class MainApp extends Application {
#Override
public void start(Stage stage) {
AnchorPane root;
try {
root = FXMLLoader.load(getClass().getResource("Sample.fxml"));
Scene scene = new Scene(root, 600, 400);
stage.setTitle("FXML Welcome");
stage.setScene(scene);
stage.show();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public static void main(String[] args) {
Application.launch(MainApp.class, args);
}
}
Sample.fxml file :
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.text.*?>
<?import javafx.scene.image.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.*?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<AnchorPane prefHeight="400.0" prefWidth="600.0" stylesheets="MCVE/application.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.Sample">
<children>
<TextField layoutX="66.0" layoutY="49.0">
<tooltip>
<Tooltip text="tooltip message" />
</tooltip>
</TextField>
</children>
</AnchorPane>
controller :
public class Sample {
//controller
}
application.css file :
.tooltip{
-fx-background-color: linear-gradient(blue,lightskyblue);
-fx-background-radius: 5.0;
}
.page-corner {
-fx-shape: " ";
}

Answer 1

I think this is because the Tooltip appears in its own window (Tooltip is a subclass of PopupControl, which eventually is a subclass of Window). Because you have applied the stylesheet to the AnchorPane, it isn't seen by the Tooltip, which is outside that hierarchy.
Instead, add the stylesheet to the Scene in your MainApp class:
scene.getStylesheets().add(getClass().getResource("/mcve/application.css").toExternalForm());