Tooltip background (with JavaFX CSS)

Question

Simple question, but I just can't find the answer anywhere (I suppose I don't know what exactly to look for...). How can I prevent my tooltips from displaying an ugly square with the scene's background image as background like in this picture?!

This is my CSS, I believe some of the options such as the buttons are affecting the tooltip... just as they affect my Datepickers in another part of the code. How do I manage them not to have this collateral effect? Will simply defining a CSS for specific objects such as the DatePicker or the Tooltip do the trick?

I'm using JDK 8u11, MAC OS Mavericks.

.root {
     -fx-background-image: url("media/background.jpg");
}

.button {
    -fx-background-color: 
        linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%),
        linear-gradient(#020b02, #3a3a3a),
        linear-gradient(#9d9e9d 0%, #6b6a6b 20%, #343534 80%, #242424 100%),
        linear-gradient(#8a8a8a 0%, #6b6a6b 20%, #343534 80%, #262626 100%),
        linear-gradient(#777777 0%, #606060 50%, #505250 51%, #2a2b2a 100%);
    -fx-background-insets: 0,1,4,5,6;
    -fx-background-radius: 9,8,5,4,3;
    -fx-padding: 15 30 15 30;
    -fx-font-family: "Arial Black";
    -fx-font-size: 18px;
    -fx-font-weight: bold;
    -fx-text-fill: white;
    -fx-effect: dropshadow( three-pass-box , rgba(255,255,255,0.2) , 1, 0.0 , 0 , 1);
}

.button:hover {
    -fx-background-color: 
        linear-gradient(#757575 0%, #373837 25%, #232723 75%, #686868 100%),
        linear-gradient(#3a3a3a, #020b02),
        linear-gradient(#242424 0%, #343534 20%, #6b6a6b 80%, #9d9e9d 100%),
        linear-gradient(#262626 0%, #343534 20%, #6b6a6b 80%, #8a8a8a 100%),
        linear-gradient(#2a2b2a 0%, #505250 50%, #606060 51%, #777777 100%);
    -fx-background-insets: 0,1,4,5,6;
    -fx-background-radius: 9,8,5,4,3;
    -fx-padding: 15 30 15 30;
    -fx-font-family: "Arial Black";
    -fx-font-size: 18px;
    -fx-font-weight: bold;
    -fx-text-fill: white;
    -fx-effect: dropshadow( three-pass-box , rgba(255,255,255,0.2) , 1, 0.0 , 0 , 1);
    -fx-cursor:hand;
}

.text-area *.text {
    -fx-text-alignment: justify;
}

.text-area {
    -fx-background-color: rgba(255,255,255,0.4);
}

.text-area .scroll-pane {
    -fx-background-color: transparent;
}

.text-area .scroll-pane .viewport{
    -fx-background-color: transparent;
}


.text-area .scroll-pane .content{
    -fx-background-color: transparent;
}

.radio-button{
    -fx-font-size: 14px;
   -fx-font-family: "Arial Black";
   -fx-fill: #818181;
   -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
}

This is strange. Maybe some CSS that you use to style other nodes is also accidentally applied to the tooltip? — Tomas Mikula, Aug 16 '14 at 12:50
Yes I think so... should I post my CSS file? It's pretty short... — Alexis R Devitre, Aug 16 '14 at 16:07
Just out of curiosity... is there a way to remove all styles before adding one... as to make sure there won't be any interference? — Alexis R Devitre, Aug 18 '14 at 04:40
I am not aware of any such thing. When you set style programatically using `node.setStyle("-fx-fill: red;")`, then the subsequent `setStyle` will override the previous value, but does not clear the style set by an external stylesheet. — Tomas Mikula, Aug 18 '14 at 12:27

jewelsea · Answer 1 · 2018-03-13T17:47:08.447

13

Here is the standard styling for a Tooltip as per the Java 8 modena.css stylesheet.

.tooltip {
    -fx-background: rgba(30,30,30);
    -fx-text-fill: white;
    -fx-background-color: rgba(30,30,30,0.8);
    -fx-background-radius: 6px;
    -fx-background-insets: 0;
    -fx-padding: 0.667em 0.75em 0.667em 0.75em; /* 10px */
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.5) , 10, 0.0 , 0 , 3 );
    -fx-font-size: 0.85em;
}

You can modify it how you wish. Info on doing so is in the Oracle CSS reference guide and CSS tutorial.

edited Mar 13 '18 at 17:47

answered Aug 16 '14 at 10:38

jewelsea

150,031
14
366
406

I added this code to my CSS... no effect on the Tooltip which seems to retain the scene's background and the the main button format. – Alexis R Devitre Aug 16 '14 at 16:10
Place an [mcve](http://stackoverflow.com/help/mcve) in your question that somebody could run but contains *only* the code necessary to replicate your issue. Also add full environment information to your question (java runtime version and OS). – jewelsea Aug 16 '14 at 18:21

score 1 · Accepted Answer · answered Aug 17 '14 at 23:16

The .root style class is added to the root node of all scenes. Since Tooltip has its own scene, tooltip's root node has the .root class as well, so the background image is applied to it as well, as per your CSS. The solution is to add a distinct style class to your main scene's root

scene.getRoot().getStyleClass().add("main-root");

and specify the background image for this distinct style class

.main-root {
    -fx-background-image: url("media/background.jpg");
}

Tooltip background (with JavaFX CSS)

2 Answers2

Linked