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


Question

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?

1
5
8/16/2014 9:38:41 AM

Accepted Answer

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

Other Options

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

18
5/23/2017 12:09:33 PM

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;
    }

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon