How customize a tooltip with 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());