Please see this example: http://codepen.io/knagis/pen/RoyyaK/
JavaScript
var data = {
"nodes":[
{"id":"m-1", "age":20, "name":"Joe", "loaded":true, "auras":["HR","Sales"]},
{"id":"m-2", "age":15, "name":"Fred", "loaded":true, "auras": ["Sales","HR"]}
],
"links":[
{"id":"l01", "from":"m-1", "to":"m-2", "type":"friend"}
]
};
var info = document.getElementById("info");
var container = document.getElementById("demo");
var chart = new NetChart({
container: container,
area: {
height: 650,
},
data: { preloaded: data },
navigation: { mode : "showall" },
events: {
onHoverChange: function(e, args) {
showInfo(args);
},
onPositionChange: function(e, args) {
// if the node moves around under the cursor, update the info position
showInfo(args);
}
}
});
function showInfo(args) {
if (args.hoverNode) {
// getNodeDimensions() will return the node position in screen px relative to the chart container.
var bounds = chart.getNodeDimensions(args.hoverNode);
info.style.display = "inline-block";
info.style.top = Math.round(bounds.y + container.offsetTop - bounds.radius) - 40 + "px";
info.style.left = Math.round(bounds.x + container.offsetLeft - bounds.radius) + "px";
info.innerHTML = args.hoverNode.id;
} else {
info.style.display = "none";
}
}
HTML
<h3>NetChart Custom Static Info Popup</h3>
<p>Hover node to see the info</p>
<script src="https://cdn.zoomcharts-cloud.com/1/latest/zoomcharts.js"></script>
<div id="demo"></div>
<div id="info" class="custom-info"></div>
CSS
.custom-info {
position: absolute;
top: 100px;
left: 100px;
display: inline-block;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
background: #ddd;
display: none;
pointer-events: none;
}