JavaFX ToolTip - A rough idea

Tuesday Dec 23, 2008

I tried to write a very rough Tool Tip feature. Actually in JavaFX, we can write our own cool Tool tip. But in the meantime, we need to take care of boundary conditions of Tool tip. Here how it looks :

 A shadow effect.

Right now its just a bad code, we will make it good in next post :D. Here it is :

package tooltip;

import javafx.scene.CustomNode;
import javafx.scene.effect.DropShadow;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.ShapeIntersect;
import javafx.scene.text.Font;
import javafx.scene.text.Text;

public class ToolTip extends CustomNode {

    public var x: Number;
    public var y: Number;
    //useless - content should decide
    public var width: Number = 100;
    public var height: Number = 50;
    //useless-Tooltip instance should be 
    //added dynamically 
    public var op: Number = 0.0;
    public var content: String;
 
    public override function create(): Node {
        return Group {
            content: [
                ShapeIntersect {
                    effect: DropShadow {
                        offsetY: -5
                        offsetX: -5
                        color: Color.color(0.4, 0.4, 0.4)

                    };
                    translateX: bind x
                    translateY: bind y
                    opacity: bind op
                    stroke: Color.GRAY
                    strokeWidth: 2
                    fill: Color.GREEN
 
                    a: [
                        Rectangle {
                            arcHeight:10
                            arcWidth:10
                            x: 0
                            y: 0
                            width: bind width
                            height: bind height
                        }
                        Rectangle {
                            rotate: 45
                            x: 40
                            y: 40
                            width: bind width / 5
                            height: bind 2 * height / 5
                        }
                    ]
                },
                Text {
                    font: Font {
                        size: 14
                    }
                    translateX: bind x
                    translateY: bind y
                    opacity: bind op
                    x: 10,
                    y: 12
                    content: bind content
                }
            ]
        };
    }
} 

Main Code for this example :

package tooltip;

import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import tooltip.ToolTip;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.input.MouseEvent;


var tt = new ToolTip;

var rect = Rectangle {
            x: 10,
            y: 10
            width: 180,
            height: 70
            stroke: Color.WHITE
            strokeWidth: 4
            fill: Color.YELLOWGREEN
            opacity: 0.8
        };

var text = Text {
            font: Font {
                size: 14
                name: "Arial"
            }
            x: 14,
            y: 30
            content: "HelloWorld - Beginning of a \nnew technology always say\n          - Hello World "
        };
var gp = Group {
    translateX: 60
    translateY: 260
    onMouseMoved: function( e: MouseEvent ):Void {
        tt.x = rect.x + tt.width;
        tt.y = rect.y - tt.height - 20;
        tt.op = 0.8;
        tt.content = "You can see \n the help of \nHelloWorld !";
    }
    onMouseExited: function( e: MouseEvent ):Void {
        tt.op = 0.0;
    }
    content: [
        rect, text,tt
    ]
}

Stage {
    title: "Tool-Tip"
    width: 450
    height: 480
    scene: Scene {
        fill:Color.BLACK
        content:[
            gp
        ]

    }
}⁞ 

If you are writing a generic tool tip take care of :

1. Scene size - it should not go off screen.

2. Height and Width of tool tip - Most of the tool tip has unit height but it depends on us, we can set it.

Like this post? | | | |

Posted at 08:46PM Dec 23, 2008 by vaibhavc in Java
Tags: api code example javafx samples tooltip