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();
      });

      triangle.on('mouseout', function () {
        tooltip.hide();
      });

      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();
      });

      circle.on('mouseout', function () {
        tooltip.hide();
      });

      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>
Enjoying Konva? Please consider to support the project.