Is there a simple way to display hint texts in JavaFX?

Asked 16/8, 2014 at 9:38 Answered 20/3, 2018 at 16:26

In the Borland VCL library, almost all controls had a hint property. During runtime, when you position mouse over the respective control, a small box with the hint text pops up and disappears again when you move the mouse, like the help messages in Windows Explorer and other programs, when mouse cursor is being held over a button.

Is there a similar concept in JavaFX (actually, I am using ScalaFX)?

Of course, I can create a new stage without decorations, add some mouse listeners etc., but is it not already available somewhere?

Rhomb answered 16/8, 2014 at 9:38 Comment(0)

You can use a Tooltip control.

Usage Sample

If you want the tooltip on a Control, for example a button, set the tooltip:

button.setTooltip(
    new Tooltip("Button of doom")
);

Otherwise, for other node types like shapes, install the tooltip:

Circle circle = new Circle(15, 15, 42);
Tooltip.install(
    circle,
    new Tooltip("Circle of light")
);

Tutorial

Oracle have a tutorial dedicated just to Tooltips.

tooltip image

As you can see above, you can set a "graphic" on a tooltip, which can be an image (or any other node), it's pretty flexible.

Tooltip Styling

Tooltip background (with JavaFX CSS)

Other Options

If Tooltip isn't what you are looking for, there are other ways to show popups:

JavaFX 2 custom popup pane

Stimson answered 16/8, 2014 at 9:59 Comment(0)

This code creates a GRAPHIC based Tooltip. Take a look at the commented htmlStr..... you can play with it as well as thisToolTip.setStyle..... and see what happens. You can change the styles in htmlStr and the string for setStyle. However I was not able to make the size of the tool tip and the pane match. So there is a border, but I made the color of both background colors to cornsilk. It gives an illusion that there is no border. But it is not true. See the code, if you find it useful, use it.

        private Tooltip createToolTip(String htmlStr) {
        Tooltip thisToolTip = new Tooltip();

//        String htmlStr = "<body style=\"background-color:cornsilk; "
//                + "border-style: none;\"> <u><b><font color=\"red\">Click Mouse's right button to see options</font></b></u><br><br>(3) Subha Jawahar of Chennai<br> now @ Chennai<br>Female <-> Married <-> Alive<br>Period : 1800 to 2099<br>D/o Dr. Subbiah [2] - <br> <b>Spouse :</b> Jawahar Rajamanickam [7] <br><br><b>Children :</b><br><br>Rudhra Jawahar [9]<br>Mithran Jawahar [10]<br><br></body>\n";
        WebView browser = new WebView();
        WebEngine webEngine = browser.getEngine();
        webEngine.loadContent(htmlStr);

        thisToolTip.setStyle("\n"
                + "    -fx-border-color: black;\n"
                + "    -fx-border-width: 1px;\n"
                + "    -fx-font: normal bold 12pt \"Times New Roman\" ;\n"
                + "    -fx-background-color: cornsilk;\n"
                + "    -fx-text-fill: black;\n"
                + "    -fx-background-radius: 4;\n"
                + "    -fx-border-radius: 4;\n"
                + "    -fx-opacity: 1.0;");

        thisToolTip.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);

        thisToolTip.setGraphic(browser);
        thisToolTip.setAutoHide(false);
        thisToolTip.setMaxWidth(300);
        thisToolTip.setGraphicTextGap(0.0);

        return thisToolTip;
    }

Kallman answered 20/3, 2018 at 16:26 Comment(0)

Recommended topics

Hot tags