Ogma example: Tooltip

This example shows how to use the legacy tooltip tool. Prefer using the tooltip plugin.

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.

index.tsindex.htmlstyles.css

import Ogma from '@linkurious/ogma';

type NodeData = {
  properties: {
    funding_total: number;
    status: string;
    market: string;
    url: string;
  };
};
const ogma = new Ogma<NodeData>({
  container: 'graph-container'
});

const graph = await Ogma.parse.jsonFromUrl<NodeData>('files/solarCity.json');
await ogma.setGraph(graph);
await ogma.view.locateGraph();

ogma.tools.tooltip.onNodeHover(
  n => {
    const 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');

    let 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(
  e => {
    const sourceText = e.getSource().getAttribute('text.content');
    const targetText = e.getTarget().getAttribute('text.content');
    const text = e.getAttribute('text.content');
    const raised_amount_usd = e.getData('properties.raised_amount_usd');
    const funded_quarter = e.getData('properties.funded_quarter');
    const funding_round_type = e.getData('properties.funding_round_type');

    let 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(
  () =>
    '<div class="ogma-tooltip" style="padding:10px">Your action menu here.</div>',
  { className: 'ogma-tooltip', position: 'right' }
);

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <link
      href="https://cdn.jsdelivr.net/npm/lucide-static@0.483.0/font/lucide.css"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
      rel="stylesheet"
    />

    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div id="graph-container"></div>
    <i class="icon-camera" style="color: rgba(0, 0, 0, 0)"></i>
    <script type="module" src="index.ts"></script>
  </body>
</html>

css

#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;
}

Tooltip ​

Tooltip