Skip to content
  1. Examples

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.

ts
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>('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://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/solid.min.css"
      rel="stylesheet"
    />

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

  <body>
    <div id="graph-container"></div>
    <i class="fa fa-camera-retro fa-1x" 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;
}
json
{
  "nodes": [
    {
      "id": 8666,
      "data": {
        "properties": {
          "name": "Elon Musk",
          "permalink": "/person/elon-musk",
          "url": "http://www.crunchbase.com/person/elon-musk",
          "picture": "img/musk.jpg"
        },
        "categories": [
          "INVESTOR"
        ]
      },
      "attributes": {
        "x": 25.858288814166933,
        "y": -7.103984513542148,
        "text": "Elon Musk",
        "radius": 3,
        "icon": {
          "font": "Font Awesome 5 Free",
          "content": "",
          "color": "#fff",
          "style": "bold"
        }
      }
    },
    {
      "id": 6870,
      "data": {
        "properties": {
          "name": "SolarCity",
          "permalink": "/organization/solarcity",
          "founded_at": "01/01/2006",
          "first_funding_at": "15/09/2006",
          "market": " Construction ",
          "founded_quarter": "2006-Q1",
          "founded_year": 2006,
          "state": "CA",
          "url": "http://www.crunchbase.com/organization/solarcity",
          "country": "USA",
          "homepage_url": "http://www.solarcity.com",
          "logo": "http://www.crunchbase.com/organization/solarcity/primary-image/raw",
          "founded_month": "2006-01",
          "funding_rounds": 13,
          "status": "operating",
          "funding_total": 1045040000,
          "region": "SF Bay Area",
          "category": "|Construction|Clean Technology|",
          "last_funding_at": "18/06/2013"
        },
        "categories": [
          "COMPANY",
          "INVESTOR"
        ]
      },
      "attributes": {
        "x": 0.09298533946275711,
        "y": 0.41120362281799316,
        "text": "SolarCity",
        "color": "#f35371",
        "radius": 7,
        "icon": {
          "font": "Font Awesome 5 Free",
          "content": "",
          "color": "#fff",
          "style": "bold"
        }
      }
    },
    {
      "id": 7396,
      "data": {
        "properties": {
          "name": "Tesla Motors",
          "permalink": "/organization/tesla-motors",
          "founded_at": "01/01/2003",
          "first_funding_at": "01/04/2004",
          "market": " Automotive ",
          "founded_quarter": "2003-Q1",
          "founded_year": 2003,
          "state": "CA",
          "url": "http://www.crunchbase.com/organization/tesla-motors",
          "country": "USA",
          "homepage_url": "http://www.teslamotors.com",
          "logo": "http://www.crunchbase.com/organization/tesla-motors/primary-image/raw",
          "founded_month": "2003-01",
          "funding_rounds": 11,
          "status": "operating",
          "funding_total": 823000000,
          "region": "SF Bay Area",
          "category": "|Automotive|",
          "last_funding_at": "10/10/2012"
        },
        "categories": [
          "COMPANY"
        ]
      },
      "attributes": {
        "x": 85.876122673705,
        "y": -21.207117111759345,
        "text": "Tesla Motors",
        "color": "#cd476a",
        "radius": 6,
        "icon": {
          "font": "Font Awesome 5 Free",
          "content": "",
          "color": "#fff",
          "style": "bold"
        }
      }
    },
    {
      "id": 2982,
      "data": {
        "properties": {
          "name": "First Solar",
          "permalink": "/organization/first-solar",
          "founded_at": "01/01/1999",
          "first_funding_at": "18/06/2013",
          "market": " Semiconductors ",
          "founded_quarter": "1999-Q1",
          "founded_year": 1999,
          "state": "AZ",
          "url": "http://www.crunchbase.com/organization/first-solar",
          "country": "USA",
          "homepage_url": "http://www.firstsolar.com",
          "logo": "http://www.crunchbase.com/organization/first-solar/primary-image/raw",
          "founded_month": "1999-01",
          "funding_rounds": 1,
          "status": "operating",
          "funding_total": 427700000,
          "region": "Phoenix",
          "category": "|Semiconductors|Clean Technology|",
          "last_funding_at": "18/06/2013"
        },
        "categories": [
          "COMPANY",
          "INVESTOR"
        ]
      },
      "attributes": {
        "x": -27.6874947092224,
        "y": -21.207117111759345,
        "text": "First Solar",
        "color": "#632654",
        "radius": 3,
        "icon": {
          "font": "Font Awesome 5 Free",
          "content": "",
          "color": "#fff",
          "style": "bold"
        }
      }
    },
    {
      "id": 3388,
      "data": {
        "properties": {
          "name": "Google",
          "permalink": "/organization/google",
          "founded_at": "07/09/1998",
          "first_funding_at": "01/08/1998",
          "market": " Software ",
          "founded_quarter": "1998-Q3",
          "founded_year": 1998,
          "state": "CA",
          "url": "http://www.crunchbase.com/organization/google",
          "country": "USA",
          "homepage_url": "https://www.google.com",
          "logo": "http://www.crunchbase.com/organization/google/primary-image/raw",
          "founded_m

...