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://unpkg.com/[email protected]/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>
Next