Question

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

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

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

我的问题：导致此问题的原因是什么？你有解决这个问题的方法吗？你有这个麻烦吗？

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

Screenshot shows issue that I described

*鼠标光标悬停在按钮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的错误，解决问题的方法非常紧急！

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" />
...

更精确的解决方案是为每个工具提示设置所需的宽度：如果我们将文本的长度向上舍入并添加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

工具提示将正确显示：

Tooltip

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工具提示 - 边框颜色错误

2 个答案: