Tooltip

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="../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: FontAwesome;
    }

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

    ogma.tools.tooltip.onNodeHover(function (n) {
      var icon = n.getAttribute('icon.content'),
        degree = n.getDegree(),
        text = n.getAttribute('text.content'),
        funding_total = n.getData('properties.funding_total'),
        status = n.getData('properties.status'),
        market = n.getData('properties.market'),
        url = n.getData('properties.url');

      var html = "<div class=\"arrow\"></div>" +
        "<div class=\"ogma-tooltip-header\"><span class=\"icon\">" + icon + "</span> " + text + "</div>" +
        "<div class=\"ogma-tooltip-body\">" +
        "  <table>";

      if (funding_total) { html += "<tr><th>Funding</th> <td>$" + funding_total + "</td></tr>"; }
      if (status) { html += "<tr><th>Status</th> <td>" + status + "</td></tr>"; }
      if (market) { html += "<tr><th>Market</th> <td>" + market + "</td></tr>"; }
      if (url) { html += "<tr><th>URL</th> <td>" + url + "</td></tr>"; }

      html += "  </table>" +
        "</div>" +
        "<div class=\"ogma-tooltip-footer\">Number of connections: " + degree + "</div>";

      return html;
    }, { className: 'ogma-tooltip' });

    ogma.tools.tooltip.onEdgeHover(function (e) {
      var sourceText = e.getSource().getAttribute('text.content'),
        targetText = e.getTarget().getAttribute('text.content'),
        text = e.getAttribute('text.content'),
        raised_amount_usd = e.getData('properties.raised_amount_usd'),
        funded_quarter = e.getData('properties.funded_quarter'),
        funding_round_type = e.getData('properties.funding_round_type');

      var html =
        "<div class=\"arrow\"></div>" +
        "<div class=\"ogma-tooltip-header\">" + sourceText + " " + text + " " + targetText + "</div>" +
        "<div class=\"ogma-tooltip-body\">" +
        "  <table>";

      if (raised_amount_usd) { html += "<tr><th>Funding</th> <td>" + raised_amount_usd + "</td></tr>"; }
      if (funded_quarter) { html += "<tr><th>Status</th> <td>" + funded_quarter + "</td></tr>"; }
      if (funding_round_type) { html += "<tr><th>Market</th> <td>" + funding_round_type + "</td></tr>"; }

      html += "  </table>" +
        "</div>";

      return html
    }, { className: 'ogma-tooltip' });

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

  </script>
</body>

</html>