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.

Baqer Naqvi · Answer 1 · 2017-02-28T11:02:52.683

13

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.

edited Feb 28 '17 at 11:02

answered Feb 23 '17 at 11:03

Baqer Naqvi

6,011
3
50
68

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) – Foon Mar 22 '18 at 20:10
1

Based on current documentation, `hoverNode` and `blurNode` events get fired if the option `interaction:{hover:true}` is enabled. – HoseinGhanbari Aug 21 '18 at 14:34
@Foon 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://stackoverflow.com/q/55748023/4572002 This seems to have been fixed in >v5.0 – Nicholas Betsworth Oct 12 '20 at 14:56

score 7 · Answer 2 · answered Mar 02 '18 at 06:38

7

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

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

answered Mar 02 '18 at 06:38

Graham Epps

101
4
2

score 3 · Answer 3 · answered Nov 08 '18 at 04:32

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';
 });

score 2 · Accepted Answer · answered Nov 10 '16 at 17:14

2

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.

answered Nov 10 '16 at 17:14

Paul Dugas

325
2
14

Please accept your own answer to indicated that the problem is actually solved when we see the question in questions lists – YakovL Feb 13 '18 at 09:12

Change mouse cursor over vis.js network node

4 Answers4