Hello I’m back with the small css skinning for the Tooltip.
Firstly the idea of this blogging came from this forum post. One guy was posting about how to make the tooltip plain as of swing which is concern about the css skinning.

First let’s get start with the normal tooltip example.

public class TooltipTest extends Application {

  public static void main(String[] args) {
    Application.launch(TooltipTest.class, args);
  }

  @Override
  public void start(Stage primaryStage) throws Exception {
    StackPane stackPane = new StackPane();
    Button butt = new Button("Test hello");
    Tooltip tp= new Tooltip("Hello this is only the test");
    tp.getStyleClass().add("ttip");
    butt.setTooltip(tp);

    stackPane.getChildren().add(butt);
    Scene sc = new Scene(stackPane,500,500);
    sc.getStylesheets().add(getClass().getResource("gui.css").toExternalForm());
    primaryStage.setScene(sc);

    primaryStage.show();

  }
}

Here I’ve added my custom css file ‘gui.css’ for styling this application.

gui.css

.ttip{
     -fx-background-radius: 0 0 0 0;
 }

.page-corner {
    -fx-shape: " ";
}

Let’s Play with the CSS.

.ttip{
     -fx-background-radius: 7 7 7 7;
 }

.ttip{
     -fx-background-radius: 0 0 0 0;
     -fx-background-color:	linear-gradient(greenyellow   , limegreen );
}

 

.ttip{
     -fx-background-radius: 0 0 0 0;
     -fx-background-color:	linear-gradient(orange, orangered );
}

 

.ttip{
     -fx-background-radius: 0 0 0 0;
     -fx-background-color:	linear-gradient(cyan  , deepskyblue  );
}

I hope you guys enjoy with this small CSS stuffs. This much for today.
Thanks. :)