Tooltip (with Mustache)

Position the cursor over a node or an edge to display a tooltip that contains some of its properties. Right-click on the background to show a tooltip that could be a contextual menu.
          <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/solid.min.css" rel="stylesheet">
  <script src="external-libs/mustache.min.js"></script>
  <script src="../build/ogma.min.js"></script>
  <style>
    #graph-container {
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
      margin: 0;
      overflow: hidden;
    }

    .ogma-tooltip {
      max-width: 240px;
      max-height: 280px;
      background-color: #fff;
      border: 1px solid #999;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      border-radius: 6px;
      cursor: auto;
      font-family: Arial;
      font-size: 12px;
    }

    .ogma-tooltip .icon {
      font-family: Font Awesome 5 Free;
    }

    .ogma-tooltip-header {
      font-variant: small-caps;
      font-size: 120%;
      color: #000;
      border-bottom: 1px solid #999;
      padding: 10px;
    }

    .ogma-tooltip-body {
      padding: 10px;
      overflow-x: hidden;
      overflow-y: auto;
      max-width: inherit;
      max-height: 180px;
    }

    .ogma-tooltip-body th {
      color: #999;
      text-align: left;
    }

    .ogma-tooltip-footer {
      padding: 10px;
      border-top: 1px solid #999;
    }

    .ogma-tooltip>.arrow {
      border-width: 10px;
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
    }

    .ogma-tooltip.top {
      margin-top: -12px;
    }

    .ogma-tooltip.top>.arrow {
      left: 50%;
      bottom: -10px;
      margin-left: -10px;
      border-top-color: #999;
      border-bottom-width: 0;
    }

    .ogma-tooltip.bottom {
      margin-top: 12px;
    }

    .ogma-tooltip.bottom>.arrow {
      left: 50%;
      top: -10px;
      margin-left: -10px;
      border-bottom-color: #999;
      border-top-width: 0;
    }

    .ogma-tooltip.left {
      margin-left: -12px;
    }

    .ogma-tooltip.left>.arrow {
      top: 50%;
      right: -10px;
      margin-top: -10px;
      border-left-color: #999;
      border-right-width: 0;
    }

    .ogma-tooltip.right {
      margin-left: 12px;
    }

    .ogma-tooltip.right>.arrow {
      top: 50%;
      left: -10px;
      margin-top: -10px;
      border-right-color: #999;
      border-left-width: 0;
    }
  </style>
</head>

<body>
  <div id="graph-container"></div>
  <!-- force icon font loading -->
  <i class="fa fa-camera-retro fa-1x" style="color: rgba(0,0,0,0);"></i>
  <script>
    'use strict';

    var ogma = new Ogma({
      container: 'graph-container'
    });

    ogma.parse.jsonFromUrl('files/solarCity.json').then(function (g) {
      ogma.setGraph(g);
      ogma.view.locateGraph();
    });

    var nodeTemplate =
      '<div class="arrow"></div>' +
      '<div class="ogma-tooltip-header"><span class="fa icon">{{icon}}</span> {{text}}</div>' +
      '<div class="ogma-tooltip-body">' +
      '  <table>' +
      '    {{#prop.funding_total}}<tr><th>Funding</th> <td>{{prop.funding_total}}</td></tr>{{/prop.funding_total}}' +
      '    {{#prop.status}}<tr><th>Status</th> <td>{{prop.status}}</td></tr>{{/prop.status}}' +
      '    {{#prop.market}}<tr><th>Market</th> <td>{{prop.market}}</td></tr>{{/prop.market}}' +
      '    {{#prop.url}}<tr><th>URL</th> <td><a href="{{prop.url}}" target="_blank">{{prop.url}}</a></td></tr>{{/prop.url}}' +
      '  </table>' +
      '</div>' +
      '<div class="ogma-tooltip-footer">Number of connections: {{degree}}</div>';

    ogma.tools.tooltip.onNodeHover(function (node) {
      var view = {
        text: node.getAttribute('text.content'),
        icon: node.getAttribute('icon.content'),
        prop: node.getData('properties'),
        degree: node.getDegree()
      };
      return Mustache.render(nodeTemplate, view);
    }, { className: 'ogma-tooltip' });

    var edgeTemplate =
      '<div class="arrow"></div>' +
      '<div class="ogma-tooltip-header">{{sourceNode}} {{text}} {{targetNode}}</div>' +
      '<div class="ogma-tooltip-body">' +
      '  <table>' +
      '    {{#prop.raised_amount_usd}}<tr><th>Funding</th> <td>{{prop.raised_amount_usd}}</td></tr>{{/prop.raised_amount_usd}}' +
      '    {{#prop.funded_quarter}}<tr><th>Status</th> <td>{{prop.funded_quarter}}</td></tr>{{/prop.funded_quarter}}' +
      '    {{#prop.funding_round_type}}<tr><th>Market</th> <td>{{prop.funding_round_type}}</td></tr>{{/prop.funding_round_type}}' +
      '  </table>' +
      '</div>';

    ogma.tools.tooltip.onEdgeHover(function (edge) {
      var view = {
        text: edge.text,
        sourceNode: edge.getSource().getAttribute('text.content'),
        targetNode: edge.getTarget().getAttribute('text.content'),
        prop: edge.getData('properties'),
      };
      return Mustache.render(edgeTemplate, view);
    }, { className: 'ogma-tooltip' });

    ogma.tools.tooltip.onBackgroundRightClick(function () {
      return '<div class="ogma-tooltip" style="padding:10px">Your menu here.</div>';
    }, { className: 'ogma-tooltip', position: 'right' });

  </script>
</body>

</html>