JavaFX工具提示 - 邊框顏色錯誤

Question

我在JavaFX中的工具提示有問題。爲了說明這個問題的核心，我通過IntelliJ Idea創建了新的JavaFX項目。該項目的根目錄是HBox和alignment="CENTER"，HBox包含四個按鈕（文本：按鈕A-D）。每個按鈕都將文本設置爲工具提示：示例工具提示A-B。通過fxml文件，我還加載了保存在名爲styles.css的文件中的級聯樣式。

問題描述：我啓動應用程序，當我用鼠標懸停在第一個按鈕上時，它的工具提示外觀與CSS文件完全相同。當我將鼠標懸停在第二個按鈕上時，工具提示的右邊框會稍微更亮。但是當我將鼠標懸停在第三或第四個按鈕上時，工具提示的右側紅色邊框稍微可見，而我們可以看到背景（黃色）和邊框顏色的混合。沒有其他國界正在這樣做，只有正確的邊界。 這是非常奇怪的行爲。

我試過的：我試過改變字體家族，字體大小和填充。

我的問題：是什麼原因導致此問題？你有解決這個問題的辦法嗎？你也有這個麻煩嗎？

截圖顯示，我描述

問題

*鼠標光標懸停在按鈕C

Main.java

package sample; 

import javafx.application.Application; 
import javafx.fxml.FXMLLoader; 
import javafx.scene.Parent; 
import javafx.scene.Scene; 
import javafx.stage.Stage; 

public class Main extends Application { 

    @Override 
    public void start(Stage primaryStage) throws Exception{ 
     Parent root = FXMLLoader.load(getClass().getResource("sample.fxml")); 
     primaryStage.setTitle("Hello World"); 
     primaryStage.setScene(new Scene(root, 300, 275)); 
     primaryStage.show(); 
    } 


    public static void main(String[] args) { 
     launch(args); 
    } 
} 

Controller.java

package sample; 

public class Controller { 
} 

sample.fxml

<?xml version="1.0" encoding="UTF-8"?> 

<?import java.lang.*?> 
<?import javafx.scene.control.*?> 
<?import javafx.scene.layout.*?> 

<HBox alignment="CENTER" spacing="10.0" stylesheets="@styles.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"> 
    <children> 
     <Button mnemonicParsing="false" text="Button A"> 
     <tooltip> 
      <Tooltip text="Sample tooltip A" /> 
     </tooltip> 
     </Button> 
     <Button mnemonicParsing="false" text="Button B"> 
     <tooltip> 
      <Tooltip text="Sample tooltip B" /> 
     </tooltip> 
     </Button> 
     <Button mnemonicParsing="false" text="Button C"> 
     <tooltip> 
      <Tooltip text="Sample tooltip C" /> 
     </tooltip> 
     </Button> 
     <Button mnemonicParsing="false" text="Button D"> 
     <tooltip> 
      <Tooltip text="Sample tooltip D" /> 
     </tooltip> 
     </Button> 
    </children> 
</HBox> 

styles.css的

.tooltip{ 
-fx-text-fill:    black; 
-fx-background-radius:  0px; 
-fx-background-color:  yellow; 
-fx-effect:     null; 
-fx-border-width:   1px; 
-fx-border-color:   red;} 

PS：對不起，我的英語水平。 如果是JavaFX的bug，解決問題的地方是非常尖銳的！

Answer 1

我已經設法重現您的問題，所以我一直在試圖找出這個奇怪/錯誤行爲的原因。

首先，我認爲它與文本的長度有關，因爲「C」與「A」的長度不同。

爲了進行調試，我創建了代碼中的場景。

@Override 
public void start(Stage primaryStage) throws IOException { 
    Button bA=new Button("Button A"); 
    Tooltip tA=new Tooltip("Sample tooltip A"); 
    tA.widthProperty().addListener((obs,b,b1)->System.out.println("A: "+tA.getWidth())); 
    bA.setTooltip(tA); 

    Button bB=new Button("Button B"); 
    Tooltip tB=new Tooltip("Sample tooltip B"); 
    tB.widthProperty().addListener((obs,b,b1)->System.out.println("B: "+tB.getWidth())); 
    bB.setTooltip(tB); 

    Button bC=new Button("Button C"); 
    Tooltip tC=new Tooltip("Sample tooltip C"); 
    tC.widthProperty().addListener((obs,b,b1)->System.out.println("C: "+tC.getWidth())); 
    bC.setTooltip(tC); 

    Button bD=new Button("Button D"); 
    Tooltip tD=new Tooltip("Sample tooltip D"); 
    tD.widthProperty().addListener((obs,b,b1)->System.out.println("D: "+tD.getWidth())); 
    bD.setTooltip(tD); 

    HBox root =new HBox(10,bA,bB,bC,bD); 
    Scene scene = new Scene(root, 300, 250); 
    scene.getStylesheets().add(getClass().getResource("root.css").toExternalForm()); 
    primaryStage.setScene(scene); 
    primaryStage.show(); 

} 

我在哪裏添加了一個偵聽器來修改工具提示的寬度。

這是輸出：

A: 18.0 
A: 0.0 
A: 95.16523742675781 
A: 95.0 
A: 95.16523742675781 
A: 95.0 

B: 18.0 
B: 0.0 
B: 94.43310546875 
B: 94.0 
B: 94.43310546875 
B: 94.0 

C: 18.0 
C: 0.0 
C: 94.9012680053711 
C: 94.0 
C: 94.9012680053711 
C: 94.0 

D: 18.0 
D: 0.0 
D: 95.73799133300781 
D: 95.0 
D: 95.73799133300781 
D: 95.0 

你發現，每一個工具提示得到其真正的寬度，然後它被截斷？

這意味着'A'的工具提示僅從95.17截斷到95，並且沒有可見的跡象顯示，但'C'從94.90截至94，幾乎爲1像素，所以這就是爲什麼右邊框幾乎不可見！

我不能說出這種行爲的原因。但我們可以嘗試解決它。

一個簡單的解決方案可能會爲文本提供足夠的空間。在您的FXML文件，這將解決這個問題：

<Tooltip prefWidth="100" text="Sample tooltip A" /> 
... 
<Tooltip prefWidth="100" text="Sample tooltip C" /> 
... 

一個更確切的解決辦法是設置需要的寬度爲每一個提示：如果我們圓了文本的長度，並添加20像素填充，工具提示會只有一個像素更寬，並且每個按鈕工具提示都會顯示邊框。

這是你如何能做到這一點（填充和邊框硬編碼爲簡單起見）：

private final double PADDING = 9d; 
private final double BORDER = 1d; 

private void setTooltipWidth(Tooltip tooltip){ 
    if(tooltip==null || 
     tooltip.getScene()==null || 
     tooltip.getScene().getRoot()==null){ 
     return; 
    } 
    Text text=(Text)tooltip.getScene().getRoot().lookup(".text"); 
    if(text==null || text.getLayoutBounds().getWidth()==0){ 
     return; 
    } 
    double width=2d*(PADDING+BORDER)+Math.ceil(text.getLayoutBounds().getWidth()); 
    tooltip.setPrefWidth(width); 
} 

而現在，每一個按鈕：

tC.widthProperty().addListener((obs,b,b1)->setTooltipWidth(tC)); 

如果我們再次寬度打印這將顯示在按鈕「C」上：

C: 18.0 
C: 0.0 
C: 94.9012680053711 
C: 94.0 
C: 94.9012680053711 
C: 95.0 

並且工具提示將正確顯示：

Answer 2

儘量使邊框透明：

.tooltip{ 
-fx-text-fill:    black; 
-fx-background-radius:  0px; 
-fx-background-color:  transparent,red,yellow; 
-fx-background-insets:  0, 1, 2; 
-fx-effect:     null; 
}