DEV Community

Cover image for How make Tool Tips on JavaFx?
victor hugo gaspar quinn
victor hugo gaspar quinn

Posted on

How make Tool Tips on JavaFx?

Tooltipsare common components in web developments, in this case, I will show you how you could create tool tips in JavaFx using FxPopup, JavaFxadds tool tips to its collection of components, however, these have the drawback that they are not compatible with all types of components

<dependency>
    <groupId>io.github.hugoquinn2</groupId>
    <artifactId>fxpopup</artifactId>
    <version>1.2.0</version>
</dependency>
Enter fullscreen mode Exit fullscreen mode

As a great advantage, all CSS styles are applied to the main scene, so following the following XML structure, you can apply your own styles.

ToolTip (.tool-tip) 
├── Label (.tool-tip-label)
Enter fullscreen mode Exit fullscreen mode

Social media buttons

// Create Social media buttons  
Button youtube = new Button();  
Button gitHub = new Button();  
Button twitter = new Button();  
Button whatsapp = new Button();  

// Apply styles and icons  
youtube.getStyleClass().add("youtube-button");  
gitHub.getStyleClass().add("github-button");  
twitter.getStyleClass().add("twitter-button");  
whatsapp.getStyleClass().add("whatsapp-button");  

youtube.setGraphic(new FontIcon("anto-youtube"));  
gitHub.setGraphic(new FontIcon("anto-github"));  
twitter.setGraphic(new FontIcon("anto-twitter"));  
whatsapp.setGraphic(new FontIcon("anto-whats-app"));  

// Create tool tips for buttons  
ToolTip toolTipYoutube = new ToolTip("Youtube", youtube, HPos.LEFT);  
ToolTip toolTipGitHub = new ToolTip("GitHub", gitHub, VPos.TOP);  
ToolTip toolTipTwitter = new ToolTip("Twitter", twitter, VPos.BOTTOM);  
ToolTip toolTipWhatsapp = new ToolTip("Whatsapp", whatsapp, HPos.RIGHT);
Enter fullscreen mode Exit fullscreen mode

User Card

// Create User Card  
ImageView userProfileImage = new ImageView("https://th.bing.com/th/id/OIP.gxCrcJ9wcnuS-hppF4l8ggHaHa?rs=1&pid=ImgDetMain");  

// Cut user Image to a circle  
userProfileImage.setFitWidth(100);  
userProfileImage.setPreserveRatio(true);  

double w = userProfileImage.getFitWidth();  
double h = userProfileImage.getFitHeight();  
double size = Math.min(w, h);  
double x = (w - size) / 2;  
double y = (h - size) / 2;  
double radius = w / 2;  

userProfileImage.setViewport(new Rectangle2D(x, y, size, size));  
userProfileImage.setClip(new Circle(radius, radius, radius));  

// Make custom Tool Tip  
ToolTip toolTip = new ToolTip("Sophia Martinez", userProfileImage, HPos.RIGHT, 15);  
Label description = new Label("Human Resources Manager, People & Culture Department");  
toolTip.getChildren().addAll(description);  

// Apply styles  
toolTip.setMaxWidth(180);  
toolTip.setMinWidth(180);  
toolTip.setAlignment(Pos.CENTER_LEFT);  

description.setWrapText(true);  
toolTip.getText().setStyle("-fx-font-weight: bold;");
Enter fullscreen mode Exit fullscreen mode

User Card example

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

👋 Kindness is contagious

If this post resonated with you, feel free to hit ❤️ or leave a quick comment to share your thoughts!

Okay