Change mouse cursor over vis.js network node

Question

Is there a way to change the mouse cursor in vis.js when it's over a network node? I'm looking to treat them as links to the object the node represents and have been asked that the cursor change to the "finger" icon to indicate it can be clicked.

Elora

Answer 1

Setting network.canvas.body.container.style.cursor = 'pointer' in a hoverNode callback and setting it back to default in a blurNode handler did the trick.

Elora

Please accept your own answer to indicated that the problem is actually solved when we see the question in questions lists – Ced

Answer 2

For that purpose, first we attach hoverNode event of network that fires when we hover on any node of network.

network.on("hoverNode", function (params) {
        network.canvas.body.container.style.cursor = 'pointer'
 });

Then we bind blurNode event of network that fires when we bring house away (blur) from node. If we don't attach this event, you will see pointer on all over your network.

 network.on("blurNode", function (params) {
        network.canvas.body.container.style.cursor = 'default'
 });

you can see documentation for further details.

Orangeism

This works reasonably well, but I had issues where if I had overlapping nodes (as in: I have physics either turned off or set to terminate quicker than will get a perfect solution), moving from one to the other causes the blurNode to fire and either it fires after hoverNode or hoverNode doesn't fire, but the mouse cursor goes back to default despite hovering over a (different) node. (And actually, was able to trigger it when they are almost overlapping and I move quickly enough) – Eaten

Based on current documentation, hoverNode and blurNode events get fired if the option interaction:{hover:true} is enabled. – Witten

@Eaten I think your issue may have been related to a bug where hoverNode event was not fired off when transitioning from an edge to a node: https://mcmap.net/q/1170783/-vis-js-hovernode-not-triggered/4572002 This seems to have been fixed in >v5.0 – Quevedo

Answer 3

Additionally, the hover flag must be set for interactions before the hoverNode event will fire:

var options = {interaction:{hover:true}};

Amberly

Answer 4

for me its work with 3 steps

1.Fired if the option interaction:{hover:true} is enabled and the mouse hovers over a node.

  var options = { 
    physics: {
      enabled: false
    },
    interaction:
    {  hover:
        true
    }};

2.hoverNode Function

network.on("hoverNode", function (params) { network.canvas.body.container.style.cursor = 'pointer'; });

3.blurNode Function

 network.on("blurNode", function (params) {
        network.canvas.body.container.style.cursor = 'default';
 });

Sugary