CODEWITHSUNDEEP
javacssjavafx
griFlo
griFlo

Reputation: 2164

javafx - tooltip has same style as label

In my application I have a label with a specific style and this label has a tooltip. Now i changed my code so that my label has an class and I define the style in a css. (which works perfectly)

But now the tooltip has the same style as the label (before it has the standard javafx 8 styling)

css:

.my-Class {
-fx-text-fill:lightblue;
-fx-font-size: 11pt;        
-fx-font-weight:bold;
-fx-font-style:italic;
}

Thats the code how i create the label

Label label= new Label("i");
label.getStyleClass().add("my-Class ");
label.setTooltip(new Tooltip("xxx"));

before the change to css the tooltip was standard font/size/... Now the font is bold and italic (but not blue)

Why is that so? And how can I change it back to the way it was before (but WITH the use of the css File)

Upvotes: 0

Views: 879

Answers (1)

Alexander Ortiz
Alexander Ortiz

Reputation: 539

Although IMO it does not provide clear information, please check this link about CSS inheritance:

CSS also provides for certain properties to be inherited by default, or to be inherited if the property value is 'inherit'. If a value is inherited, it is inherited from the computed value of the element's parent in the document tree. In JavaFX, inheritance is similar, except that instead of elements in the document tree, inheritance occurs from parent nodes in the scene graph.

So, your tooltip is inheriting some of its parent’s CSS attributes. How can you know what kind of attributes is it inheriting? Take a look at these lines (Java 8, not an easy code!):

Label label= new Label("i");
label.getStyleClass().add("my-Class");
Tooltip tooltip = new Tooltip(“xxx”);
label.setTooltip(tooltip);

List<CssMetaData< ? extends Styleable, ? >> cssProperties = ex2.getCssMetaData().stream().filter(t -> t.getProperty().equals("-fx-font")).findFirst().get().getSubProperties();
boolean inherits = cssProperties.stream().filter(t -> t.getProperty().equals("-fx-font-style")).findFirst().get().isInherits(); // Returns true

If you inspect the cssProperties list you should be able to see all the related font properties that are inherited (inherits: true). This list should return at least four css styles, among which -fx-font-style and -fx-font-weight appear.

In summary, if you want your tooltip have a regular style and size, you must add to your tooltip a new CSS style:

.my-Tooltip {
-fx-font-size: 11pt;        
-fx-font-weight: normal;
-fx-font-style: normal;
}

Otherwhise, it will always inherit its parent’s style.

Upvotes: 2

Related Questions