tooltip plugin for HTML5 canvas

Question

I'm actually looking for a tooltip plugin that works on canvas, means that the tooltip would be created and called on "mouseover" event in kineticJS. I found a ton of them but none is working for me because the majority works on basic HTML tags, whereas I'm just calling the container div in the body tag.

Can somebody guide me? Is there a solution, other than creating the tooltip by myself using KineticJS?

Answer 1

You can do with KineticJS something like this (DEMO):

function showTooltip() {
  var x = line.points()[0] / 2 + line.points()[2] / 2 + line.x();
  var y = line.points()[1] / 2 + line.points()[3] / 2 + line.y();
  tooltip = new Kinetic.Label({
        x: x,
        y: y,
        opacity: 0.75
      });

      tooltip.add(new Kinetic.Tag({
        fill: 'green',
        pointerDirection: 'down',
        pointerWidth: 10,
        pointerHeight: 10,
        lineJoin: 'round',
        shadowColor: 'black',
        shadowBlur: 3,
        shadowOffset: {x:2,y:2},
        shadowOpacity: 0.1
      }));

      tooltip.add(new Kinetic.Text({
        text: 'Tooltip pointing down',
        fontFamily: 'Calibri',
        fontSize: 18,
        padding: 5,
        fill: 'white'
      }));
  layer.add(tooltip);
  layer.draw();
}
layer.add(line);
line.on('mouseenter', function() {
  showTooltip();
});
line.on('mouseleave', function() {
  tooltip.destroy();
  layer.draw();
});