All versions of this documentation
X

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.

Open in a new window.
          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.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>