CODEWITHSUNDEEP
htmlcanvastooltiphtml5-canvaskineticjs
dopatraman
dopatraman

Reputation: 13908

html5 tooltip object?

I found this tutorial on html5canvastutorials.com:

var triangle = new Kinetic.Shape(function(){
                var context = this.getContext();
                context.beginPath();
                context.lineWidth = 4;
                context.strokeStyle = "black";
                context.fillStyle = "#00D2FF";
                context.moveTo(120, 50);
                context.lineTo(250, 80);
                context.lineTo(150, 170);
                context.closePath();
                context.fill();
                context.stroke();
            });

            triangle.addEventListener("mousemove", function(){
                var mousePos = stage.getMousePos();
                tooltip.x = mousePos.x;
                tooltip.y = mousePos.y;
                tooltip.text = "Cyan Triangle";
                tooltip.draw();
            });

The tooltip object is used without being previously defined. Does HTML 5 canvas have a predefined tooltip object? Or am i missing something here?

Upvotes: 0

Views: 1244

Answers (1)

Jonas
Jonas

Reputation: 128867

You missed this part of the code:

var tooltip = new Kinetic.Shape(function(){
                var context = this.getContext();
                context.beginPath();
                context.fillStyle = "black";
                context.fillRect(5, 5, 200, 30);
                context.font = "12pt Calibri";
                context.fillStyle = "white";
                context.textBaseline = "top";
                context.fillText(tooltip.text, 10, 10);
            }, {
                x: 5,
                y: 5,
                width: 200,
                height: 30
            });

Upvotes: 1

Related Questions