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

Question

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

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

我尝试过：我尝试过改变字体系列、字体大小和填充。

我的问题：是什么导致了这个问题？你有解决那个问题的办法吗？你也有这个麻烦吗？

截图显示了我描述的问题

*鼠标光标悬停在按钮C上

主要的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);
    }
}

控制器。JAVA

package sample;

public class Controller {
}

样品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>

风格。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的错误，解决问题的地方非常尖锐！

Answer 1

尽量使边界透明：

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

Answer 2

我设法重现了你的问题，所以我一直在试图找出这种奇怪/有问题行为的原因。

首先，我认为这与文本的长度有关，因为“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" />
...

更精确的解决方案是为每个工具提示设置所需的宽度：如果我们将文本长度四舍五入并添加20px的填充，工具提示将仅宽一个像素，并且每个按钮工具提示的边框都将可见。

这就是你可以做到的（为了简单起见，填充和边框硬编码）：

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

工具提示将正确显示：