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

Answer 1

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