All versions of this documentation
X

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.

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="../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>