Tooltip background (using JavaFX CSS)

Simple question, but I can't find the answer anywhere (I don't think I know what to look for...) How to prevent my tooltip from displaying an ugly box and the background image of the scene is like this picture?!

This is my CSS, and I believe some options such as buttons are affecting tooltips... Just as they affect my datepickers in another part of the code How to manage them will not have this side effect? Just define a CSS for a specific object, such as datepicker or tooltip?

I am 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%,#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,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-@R_686_2419@,rgba(255,255,0.2),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%,#8a8a8a 100%),linear-gradient(#2a2b2a 0%,#505250 50%,#606060 51%,#777777 100%);
    -fx-background-insets: 0,1);
    -fx-cursor:hand;
}

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

.text-area {
    -fx-background-color: rgba(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-@R_686_2419@,rgba(0,0.7),6,2 );
}

Solution

. The root style class will be added to the root node of all scenes Because tooltip has its own scene, so does the root node of tooltip Root class, so according to your CSS, the background image is also applied to it The solution is to add a unique style class to the root of the main scene

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

And specify the background image of this different style class

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