JavaFX ToolTip - A rough idea

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.

Comments:

Hi Vaibhav,

Above code is not working in javafx 1.2
What change I need to do for that?

Really very nice tooltip It is works fine in older version of javafx

Please advice

Posted by Madhav Vyas on June 12, 2009 at 10:19 AM IST #

Hi Vaibhav,

Really very nice tooltip It is works fine in older version of javafx.
But one thing I want to mention that is
code is not working in javafx 1.2
What change I need to do for that?

Please advice

Posted by Madhav Vyas on June 12, 2009 at 10:20 AM IST #

Hmm a bug ! Let me raise this bug. Give me a day or two I will try to write something.

Posted by guest on June 12, 2009 at 06:36 PM IST #

@madhav
i guess you need to add
b: [clienarearectangle] in ShapeIntersect
its look like shapeintersect work as XOR between a & b attributes

Posted by hakim on June 21, 2009 at 03:19 AM IST #

Post a Comment:
Comments are closed for this entry.
About

Hi, I am Vaibhav Choudhary working in Sun. This blog is all about simple concept of Java and JavaFX.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today