Appearance
Tooltip (with Mustache)
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';
import Mustache from 'mustache';
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();
const 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(
node => {
const 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' }
);
const 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(
edge => {
const view = {
text: edge.getAttribute('text.content'),
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(
() => '<div class="ogma-tooltip" style="padding:10px">Your 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>
<!-- force icon font loading -->
<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: 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;
}
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
...