Hello I’m here to show you the new ToolTip which you can customize as you like! My Tooltip is little bit messy  process but it takes very less memory. You can easily apply my Tooltip to your desired application. Here the code goes:

My CustomNode who uses the tooltip..

class MyCustomNode extends CustomNode{

        //ToolTip node
        public var tooltip:MyToolTip;
        //the text of tooltip
	public var text:String;
        //main node
        public var node:Node;

        public override function create():Group{
            return  Group{
                onMouseMoved:function(e:MouseEvent):Void{

                      tooltip.text = text;
                      tooltip.visible = true;
                      tooltip.layoutX = e.x+100; //or your desired x
                      tooltip.layoutY = e.y; //or your desired y
                }
                onMouseExited:function(e:MouseEvent):Void{
                     tooltip.visible = false;
                }
                content:[
                    node
                ]
            }
        }
}

Till here there is something little bit different. I used a new tooltip variable which has datatypes of MyToolTip. Ok I’ll show you what the MyToolTip class is:

class MyToolTip extends CustomNode{

    public var text:String;

    public override function create():Group{
            return  Group{
                content:[
                    Rectangle{
                        width:bind text.length() *15
                        height:25
                        fill: Color.web("#f5f761");
                        arcWidth:5
                        arcHeight:5
                        effect:DropShadow {
                            offsetX: 0
                            offsetY: 0
                            color: Color.BLACK
                            radius: 5
                        }

                    }

                    Text {
                            font: Font {
                                    size: 15
                            }
                            fill:Color.BLACK
                            x: 10, y: 20
                            content: bind text
                    }

                ]
            }

        }
}

You can see there is nothing new on MyTooltip it’s all about using simple graphics and text. Now the main class goes here:

def tooltip = MyToolTip{

}
def node1 = MyCustomNode{
    text : "node1";
    tooltip:tooltip;
    node:Rectangle {
        x: 10, y: 10
        width: 140, height: 90
        fill: Color.BLUE
    }
}
def node2 = MyCustomNode{
    text : "node2";
    tooltip:tooltip;
    node:Rectangle {
        x: 10, y: 10
        width: 140, height: 90
        fill: Color.RED
    }
}
def hbox:HBox=HBox{
        content:[node1,node2]

        onMouseMoved:function(e:MouseEvent):Void{

              println(e.x);
              tooltip.visible = true;
              tooltip.layoutX = e.x; //or your desired x
              tooltip.layoutY = e.y; //or your desired y
        }
        onMouseExited:function(e:MouseEvent):Void{
             println(e.x);
             tooltip.visible = false;

        }

}
Stage {
    title: "Application title"
    scene: Scene {
        width: 500
        height: 500
        content: [
        hbox,tooltip
        ]
    }
}

Now you can see the main thing is ; I’m using a single MyToolTip which controls all  the nodes tooltip. That’s all . Thanks for watching the post. You can see the demo at below launch button.