翻譯自  Tooltip

在本章中，您將瞭解工具提示，即當滑鼠游標懸停該控制元件時，可以為任何UI控制元件設定的控制元件。

的Tooltip類表示通常用於顯示關於所述使用者介面的控制附加資訊的公共UI元件。可以通過呼叫setTooltip方法在任何控制元件上設定工具提示。

工具提示有兩種不同的狀態：啟用和顯示。啟用工具提示後，滑鼠移動到控制元件上。當工具提示處於顯示狀態時，它實際上會出現。顯示的工具提示也被啟用。工具提示啟用時和實際顯示之間通常會有一些延遲。

帶有工具提示的密碼欄位如圖20-1所示。

圖20-1新增到密碼欄位的工具提示

建立工具提示

研究示例20-1中的程式碼片段，該程式碼片段使用上圖所示的JavaFX應用程式中的工具提示建立密碼欄位。

示例20-1在密碼欄位中新增工具提示

final PasswordField pf = new PasswordField();
final Tooltip tooltip = new Tooltip();
tooltip.setText(
    "\nYour password must be\n" +
    "at least 8 characters in length\n"  +
);
pf.setTooltip(tooltip);
 

javafx.scene.control包中的每個UI控制元件都有setTooltip新增工具提示的方法。您可以在Tooltip建構函式中或使用該setText方法定義文字標題。

由於Tooltip該類是類的擴充套件，因此Labeled您不僅可以新增文字標題，還可以新增圖形圖示。例20-2中的程式碼片段在密碼欄位的工具提示中添加了一個圖示。

示例20-2在工具提示中新增圖示

Image image = new Image(
    getClass().getResourceAsStream("warn.png")
);
tooltip.setGraphic(new ImageView(image));
 

將此程式碼片段新增到應用程式並編譯並執行程式碼後，將顯示圖20-2中所示的工具提示。

圖20-2帶圖示的工具提示

工具提示不僅可以包含附加資訊或輔助資訊，還可以包含資料。

在工具提示中顯示應用程式資料

圖20-3中的應用程式使用工具提示中顯示的資訊來計算酒店住宿的總成本

圖20-3計算酒店價格

每個複選框都附有工具提示。每個工具提示都會顯示特定預訂選項的費率。如果使用者選中複選框，則會將相應的值新增到總計。如果取消選中所選複選框，則會從總計中扣除相應的值。

檢視例20-3中顯示的應用程式的原始碼。

示例20-3使用工具提示計算酒店價格

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.control.Tooltip;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;
 
 
public class Main extends Application {
 
    final static String[] rooms = new String[]{
        "Accommodation (BB)",
        "Half Board",
        "Late Check-out",
        "Extra Bed"
    };
    final static Integer[] rates = new Integer[]{
        100, 20, 10, 30
    };
    final CheckBox[] cbs = new CheckBox[rooms.length];
    final Label total = new Label("Total: $0");
    Integer sum = 0;
 
    public static void main(String[] args) {
        launch(args);
    }
 
    @Override
    public void start(Stage stage) {
        Scene scene = new Scene(new Group());
        stage.setTitle("Tooltip Sample");
        stage.setWidth(300);
        stage.setHeight(150);
 
        total.setFont(new Font("Arial", 20));
        
        for (int i = 0; i < rooms.length; i++) {
            final CheckBox cb = cbs[i] = new CheckBox(rooms[i]);
            final Integer rate = rates[i];
            final Tooltip tooltip = new Tooltip("$" + rates[i].toString());
            tooltip.setFont(new Font("Arial", 16));
            cb.setTooltip(tooltip);
            cb.selectedProperty().addListener(new ChangeListener<Boolean>() {
                public void changed(ObservableValue<? extends Boolean> ov,
                    Boolean old_val, Boolean new_val) {
                    if (cb.isSelected()) {
                        sum = sum + rate;
                    } else {
                        sum = sum - rate;
                    }
                    total.setText("Total: $" + sum.toString());
                }
            });
        }
 
        VBox vbox = new VBox();
        vbox.getChildren().addAll(cbs);
        vbox.setSpacing(5);
        HBox root = new HBox();
        root.getChildren().add(vbox);
        root.getChildren().add(total);
        root.setSpacing(40);
        root.setPadding(new Insets(20, 10, 10, 20));
 
        ((Group) scene.getRoot()).getChildren().add(root);
 
        stage.setScene(scene);
        stage.show();
    }
}

中的程式碼行實施例20-4在用實施例20-3建立工具提示和分配文字字幕到它。該Integer期權價格的值轉換成String數值。

示例20-4設定工具提示的值

final Tooltip tooltip = new Tooltip("$" + rates[i].toString())

您可以通過應用CSS來改變工具提示的視覺外觀。

相關的API文件 

• Tooltip

• Labeled