JavaFX 工具提示 - 边框颜色错误

Question

我对 JavaFX 中的工具提示有疑问。为了说明这个问题的核心，我通过 IntelliJ Idea 创建了新的 JavaFX 项目。该项目的根窗格是带 alignment="CENTER" 的 HBox，并且 HBox 包含四个按钮（文本：按钮 A-D）。每个按钮都设置了带有文本的工具提示：示例工具提示 A-B。通过 fxml 文件，我还加载了保存在名为 styles.css.

的文件中的级联样式

问题描述： 我启动了应用程序，当我将鼠标悬停在第一个按钮上时，它的工具提示看起来与 CSS 文件描述的完全一样。当我将鼠标悬停在第二个按钮上时，工具提示的右边框会稍微亮一些。但是当我将鼠标悬停在第三个或第四个按钮上时，工具提示的右红色边框略微可见，我们可以看到它的背景（黄色）和边框颜色的混合。 None 其他边框都是这样做的，只有右边框。 这是非常奇怪的行为。

我尝试了什么：我尝试更改字体系列、字体大小和填充。

我的问题： 是什么导致了这个问题？你有解决这个问题的方法吗？你也有这样的烦恼吗？

屏幕截图显示了我描述的问题

*鼠标光标悬停在按钮 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

我已经成功地重现了你的问题，所以我一直在试图找出这种 weird/buggy 行为的原因。

首先，我认为这与文本的长度有关，因为 "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 个像素, 这就是为什么右边框几乎不可见的原因！

我无法说出这种行为的原因。但是我们可以尝试解决。

一个简单的解决方案可以为文本提供足够的 space。在您的 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;
}

JavaFX 工具提示 - 边框颜色错误

JavaFX Tooltip - border color bug

java

css

javafx

tooltip

border