Skip to content
April 28, 2010 / Narayan

New feature of Javafx 1.3: Tooltip at Control and Node

Today I’m going to show how to get the Tooltip on rollover of any object. Firstly check out the API of JavaFX 1.3 ToolTip. We use Tooltip on various application for the reference to the user. We especially use this feature for Object,Button or any Image.

Let’s see how the tooltip works.

Requirement:

Firstly you need to make any Object (only from javafx.scene.control which I’ll tell later.) of JavaFx e.g. Button,PasswordBox,TextBox,Label,ComboBox etc.

Sample Code (For making ToolTip):

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Tooltip;

/**
 * @author JAVANEPAL
 */

var submit = Button {
	text: "Submit"
        tooltip:Tooltip{
            text:"It's a button"
        }
}

Stage {
    title: "Application title"
    scene: Scene {
        width: 250
        height: 80
        content: [
            submit
        ]
    }
}

Output:(you can see “It’s a button” as tooltip of Button)

ToolTip

Now the question comes what to do when I would like to make a tooltip for any shape of Javafx like : Rectangle, Circle, Polygon, etc. or on any Nodes. So for that you need to have a small trick .
Let’s have a code of making one Rectangle:

var myRect = Rectangle {
	x: 10, y: 10
	width: 140, height: 90
	fill: Color.GRAY
}

then let’s make one Tooltip variable.

var mytip = Tooltip{
    text:"It's a tooltip for shapes or Nodes too"
}

As we know that the tooltip only works on javafx.scene.control classes
but we are having some tricks here. Let’s put the Rectangle and Tooltip at a Group class’s content[]

var myGroup=Group {
       
	content: [
		myRect,mytip
	]
        //This is helpful for the rollover
        //and display tooltip
        onMouseEntered: function (e:MouseEvent): Void {
                 mytip.activate();
        }
        //This is helpful for the rollout
        //and quit tooltip
        onMouseExited: function (e:MouseEvent): Void {
            mytip.deactivate();
        }

}

In above code we have used the rollover event in Group, which helps us to run the tooltip and rollout event for the disable of tooltip.
Finally it’s finished we have made the Tooltip shown at Nodes too.

Source code for Tooltip on Nodes

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Tooltip;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.Group;
import javafx.scene.input.MouseEvent;

/**
 * @author JAVANEPAL
 */


var myRect = Rectangle {
	x: 10, y: 10
	width: 140, height: 90
	fill: Color.GRAY
}
var mytip = Tooltip{
    text:"It's a tooltip for shapes too"
}

var myGroup=Group {
       
	content: [
		myRect,mytip
	]
        //This is helpful for the rollover
        //and display tooltip
        onMouseEntered: function (e:MouseEvent): Void {
             mytip.activate();
        }
        //This is helpful for the rollout
        //and quit tooltip
        onMouseExited: function (e:MouseEvent): Void {
            mytip.deactivate();
        }

}


Stage {
    title: "Application title"
    scene: Scene {
        width: 250
        height: 120
        content: [
            myGroup
        ]
    }
}

Output:

Javafx Tooltip

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: