How does one get a "fixed" position (like for example the center of the node/edge) for tooltip/popup in vis.js network using javascript?
Right now, the tooltips move as the mouse cursor is moving and therefore is not possible to copy the text which is in the tooltip! The tooltip should be "fix" and not move in order to allow the user to "catch it" using the mouse and copy (and paste it lated) that text which is inside it.
Here is the standard Javascript code where by default the tooltip/popup is "running away" from the mouse.
<script type="text/javascript" src=".2.0/vis.min.js"></script>
<link href=".2.0/vis.min.css" rel="stylesheet" type="text/css" />
...
<style type="text/css">
#mynetwork {
position:relative;
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1', title:'popup'},
{id: 2, label: 'Node 2', title:'popup'},
{id: 3, label: 'Node 3', title:'popup'},
{id: 4, label: 'Node 4', title:'popup'},
{id: 5, label: 'Node 5', title:'popup'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3, title:'popup'},
{from: 1, to: 2, title:'popup'},
{from: 2, to: 4, title:'popup'},
{from: 2, to: 5, title:'popup'},
{from: 3, to: 3, title:'popup'}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
</script>
How does one get a "fixed" position (like for example the center of the node/edge) for tooltip/popup in vis.js network using javascript?
Right now, the tooltips move as the mouse cursor is moving and therefore is not possible to copy the text which is in the tooltip! The tooltip should be "fix" and not move in order to allow the user to "catch it" using the mouse and copy (and paste it lated) that text which is inside it.
Here is the standard Javascript code where by default the tooltip/popup is "running away" from the mouse.
<script type="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/vis/4.2.0/vis.min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/vis/4.2.0/vis.min.css" rel="stylesheet" type="text/css" />
...
<style type="text/css">
#mynetwork {
position:relative;
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1', title:'popup'},
{id: 2, label: 'Node 2', title:'popup'},
{id: 3, label: 'Node 3', title:'popup'},
{id: 4, label: 'Node 4', title:'popup'},
{id: 5, label: 'Node 5', title:'popup'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3, title:'popup'},
{from: 1, to: 2, title:'popup'},
{from: 2, to: 4, title:'popup'},
{from: 2, to: 5, title:'popup'},
{from: 3, to: 3, title:'popup'}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
</script>
- Were you able to solve this problem ? I am also stuck at something similar. – monica Commented Jun 24, 2020 at 15:37
2 Answers
Reset to default 1I agree with Termin, use the click event and paint a div over the canvas.
Finding the click position was the hard part for me. Vis.js does a great job of giving the x,y within the canvas, but you need the canvas position in the DOM to make it all work. jQuery is great at position on the page, so I used that to find the position of the canvas and locate the div.
network.on('click', function (properties) {
var nodeID = properties.nodes[0];
if (nodeID) {
var sNodeLabel = this.body.nodes[nodeID].options.label
var sToolTip = this.body.nodes[nodeID].options.title;
//use JQUERY to see where the canvas is on the page.
var canvasPosition = $('.vis-network').position();
//the properties give x & y relative to the edge of the canvas, not to the whole document.
var clickX = properties.pointer.DOM.x + canvasPosition.top;
var clickY = properties.pointer.DOM.y + canvasPosition.left;
//make sure we have a valid div, either clear it or generate one.
if ($('#cellBatchAttrPopUp').length) {
$('div#cellBatchAttrPopUp').empty();
}
else {
$('<div id="cellBatchAttrPopUp"></div>').click(function () {
//clicking the popup hides it again.
$(this).empty().hide();
}).css('position','absolute').appendTo("body");
}
// put the div over the node, display the tooltip and show it.
$('div#cellBatchAttrPopUp').append(sNodeLabel)
.append('<br/>')
.append(sToolTip)
.css('top', clickY).css('left', clickX)
.show();
}
});
CSS to make the popup look nice, really position: absolute; is the only thing essential here.
div#cellBatchAttrPopUp {
display: none;
position: absolute;
z-index: 2000;
padding: 4px 8px;
color: #333;
white-space: nowrap;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
It seems like you need something else then tooltip. in this case, i think click is better than hover for displaying the popup. i suggest you to do the follow:
add click evet to you network, this should open a popup you should set on your html.
network.on("click", function (params) {
// your element, edge or node
// set the popup position by getting the params.pointer attr
// handle the toggle behavior
});
in this way, you will have total control on your popup.
see this example,
and use this doc