JavaFX | Using JavaFX UI Controls

Tooltip

The Tooltip class represents a common UI component, which is typically used to display additional information about the UI control. The tooltip is shown when the control is hovered over by the mouse cursor. The tooltip is assigned to the UI control by using the tooltip instance variable, which all the UI controls inherit from the Control class. You can add text or graphical content to the tooltip. The tooltip has two different states: activated and showing. When the tooltip is activated, it means that the mouse moves over a control. The showing state implies that the tooltip is actually shown. A shown tooltip is also activated. There is usually some delay between when the Tooltip becomes activated and when it is actually shown.

The following code fragment creates a multiline tooltip for a password box.

Source Code

import javafx.scene.control.PasswordBox;
import javafx.scene.control.Tooltip;

PasswordBox {
	echoChar: "*"
	columns: 15
	tooltip: Tooltip {
	text: "Your password must be\n"  
		"at least 8 characters in\n"  
		"length" 
	}	
}

When added to the application, this code produces the following controls.

A tooltip added to a password box

The text instance variable defines the text caption for the control. Because the Tooltip class is an extension of the Labeled class, you can add a text caption and an image to the tooltip. The following application adds text and a graphical tooltip to buttons.

A tooltip added to buttons

Take a moment to review the source code of the application.

Source Code

package customtooltipsample;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.image.*;
import javafx.scene.layout.*;
import javafx.geometry.Insets;

var okImage = Image {url: "{__DIR__}ok.png" };
var notImage = Image {url: "{__DIR__}not.png" };

Stage {
    title: "Application title"
    scene: Scene {
        width: 250
        height: 80
        content: [
            HBox {
                padding: Insets{top: 10 left: 10}
                spacing: 10
                content: [
                    Button {
                       text: "Yes"
                       layoutInfo: LayoutInfo {width: 40 }
                       tooltip: Tooltip {
                           text: "Accept"
                           graphic : ImageView{
                               image: okImage
                               opacity: 0.5
                               fitWidth: 20
                               preserveRatio: true
                           }
                       },
                    },
                    Button {
                        text: "No"
                        layoutInfo: LayoutInfo {width: 40 }
                        tooltip: Tooltip {
                           text: "Decline"
                           graphic : ImageView{
                               image: notImage
                               opacity: 0.5
                               fitWidth: 20
                               preserveRatio: true
                           }
                       }
                    }
                ]
            }//HBox
        ]//content
    }//Scene
}//Stage

In this application, the text content of the buttons provides less information to a user than the tooltip's content. You can use this approach when space in your user interface is limited.

Your tooltip can contain not only additional or auxiliary information, but it can also present some actual data, for example, hotel rates, as shown in the following application.

Tooltips applied to the horizontal list items

Each checkbox in the horizontal list is accompanied by a tooltip. The tooltips display rates for a particular type of room. If a user selects a corresponding checkbox, the rate value is added to the total sum.

Look at the source code of this application.

Source Code

package tooltipsample;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.geometry.VPos;
import javafx.scene.text.Font;

var rooms = ["Double Room", "Twin Room", "Single Room", "Family App"];
var rates = [100, 95, 120, 150];
var total = 0;

class MyCheckBox extends CheckBox {
    var rate: Integer;
    override var selected on replace {
        if (selected) then total += rate else total -= rate
    }
}

Stage {
    title: "Application title"
    scene: Scene {
        width: 450
        height: 80
        content: [
            HBox {
                spacing: 10
                nodeVPos: VPos.CENTER;
                content: [
                    ListView {
                        items: [rooms]
                        vertical: false
                        layoutInfo: LayoutInfo {height: 40 width: 310}
                        cellFactory: function (): ListCell {
                            var cell: ListCell = ListCell {
                                node: MyCheckBox {
                                    visible: bind not cell.empty
                                    text: bind "{cell.item}"
                                    blocksMouse: false
                                    rate: bind rates[cell.index]
                                    tooltip: Tooltip {
                                        text: bind "${rates[cell.index]}"
                                    }
                                }
                            }
                        }
                    },
                    Label {
                        text: bind "Total: ${total}"
                        font: Font {size: 14}
                    }
                ]
            }
        ]
    }
}

When the application starts, the total variable is null. When one of the checkboxes is selected, the value that its tooltip renders is added to the total variable. If a checkbox becomes deselected, the corresponding value is subtracted from the total variable.

You might wonder why the tooltip is yellow. Yellow is the default color of the control. You can change the control's visual appearance by applying CSS styles (see Applying CSS to UI Controls).

Samples That Use Tooltips

Style Editor

Tooltip

Related Documents

Samples That Use Tooltips