How to show tooltip on the dynamic images using kineticjs?

1
2
3
4
5
6
7

var stage = new Kinetic.Stage({
  container: 'container',
  width: 500,
  height: 500
});

var layer = new Kinetic.Layer();

 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
31
32
33
34
35
36
37
38
39
40
41
42
43

var imageObj = new Image();
imageObj.onload = function() {
  var image = new Kinetic.Image({
    x: 100,
    y: 100,
    image: imageObj,
    width: 200,
    height: 200
  });

  image.on("mouseover", function() {
    tooltip.show();
  });

  image.on("mouseout", function() {
    tooltip.hide();
  });

  layer.add(image);
  stage.add(layer);
};

imageObj.src = 'image.jpg';

var tooltip = new Kinetic.Label({
  opacity: 0.75,
  visible: false,
  listening: false
});

var tooltipTag = new Kinetic.Tag({
  fill: 'black',
  pointerDirection: 'up',
  pointerWidth: 10,
  pointerHeight: 10,
  lineJoin: 'round',
  shadowColor: 'black',
  shadowBlur: 10,
  shadowOffset: 10,
  shadowOpacity: 0.5
});

tooltip.add(tooltipTag);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

tooltip.off("update");
tooltip.on("update", function() {
  var pos = stage.getPointerPosition();
  tooltip.position({
    x: pos.x,
    y: pos.y + 5
  });
});

layer.add(tooltip);