Shape Tooltips

#HTML5 Canvas Shape Tooltips with Konva

Instructions: Mousemove over shape to see the tooltip.

Konva Shape Tooltipsview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Shape Tooltips Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var shapesLayer = new Konva.Layer();
var tooltipLayer = new Konva.Layer();
var triangle = new Konva.Shape({
stroke : 'black',
fill : '#00D2FF',
strokeWidth : 1,
sceneFunc: function(context){
context.beginPath();
context.moveTo(120, 50);
context.lineTo(250, 80);
context.lineTo(150, 170);
context.closePath();
context.fillStrokeShape(this);
}
});
triangle.on("mousemove", function(){
var mousePos = stage.getPointerPosition();
tooltip.position({
x : mousePos.x + 5,
y : mousePos.y + 5
});
tooltip.text("Cyan Triangle");
tooltip.show();
tooltipLayer.batchDraw();
});
triangle.on("mouseout", function(){
tooltip.hide();
tooltipLayer.draw();
});
shapesLayer.add(triangle);
var circle = new Konva.Circle({
x: 250,
y: stage.height() / 2,
fill: "red",
stroke: "black",
strokeWidth: 4,
radius: 70
});
circle.on("mousemove", function(){
var mousePos = stage.getPointerPosition();
tooltip.position({
x : mousePos.x + 5,
y : mousePos.y + 5
});
tooltip.text("Red Circle");
tooltip.show();
tooltipLayer.batchDraw();
});
circle.on("mouseout", function(){
tooltip.hide();
tooltipLayer.draw();
});
shapesLayer.add(circle);
var tooltip = new Konva.Text({
text: "",
fontFamily: "Calibri",
fontSize: 12,
padding: 5,
textFill: "white",
fill: "black",
alpha: 0.75,
visible: false
});
tooltipLayer.add(tooltip);
stage.add(shapesLayer);
stage.add(tooltipLayer);
</script>
</body>
</html>