Appearance
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
...