CODEWITHSUNDEEP
cssjavafx-2tooltip
Nono
Nono

Reputation: 21

How customize a tooltip with css?

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: " ";
}

Upvotes: 1

Views: 1609

Answers (1)

James_D
James_D

Reputation: 209319

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());

Upvotes: 1

Related Questions