Why don't my node hover popups work in my vis.

Question

I am having an issue where despite including the 'title' property in my node objects, when I hover over a node, no pop up window with the contents of my title are displayed.

Here are my options and how I set my network up.

setUpNetwork(){
    let container = document.getElementById('mynetwork');
    //These options dictate the dynamic of the network
    let options = {
        nodes: {
            shape: 'box'
        },
        interaction: {
            dragNodes: false,
            dragView: false,
            hover: true
        },
        layout: {
            randomSeed: undefined,
            improvedLayout: true,
            hierarchical: {
                enabled: true,
                levelSeparation: 180,
                nodeSpacing: 180,
                edgeMinimization: true,
                parentCentralization: true,
                direction: 'UD', // UD, DU, LR, RL
                sortMethod: 'directed' // hubsize, directed
            }
        },
        physics: {
            enabled: false
        }
    }
    // initialize your network!
    this.network = new vis.Network(container, this.data, options);
}

When I add a node to my list of nodes for my network, this is my structure:

addNode(node: any){
    try {
        this.data.nodes.add({
            id: node.id,
            color: node.color,
            title: node.title,
            label: node.label
        });
        this.network.fit();
    }
    catch (err) {}
}

The environment that I'm running my code from makes it difficult to provide an example of this issue live. Everything else in the network works just fine (label, id, color), just not the title when I hover over a node.

EDIT:

I copied this code from this example from vis.js where pop ups are working.

// create an array with nodes
var nodes = new vis.DataSet([
    {id: 1, label: 'Node 1', title: 'I have a popup!'},
    {id: 2, label: 'Node 2', title: 'I have a popup!'},
    {id: 3, label: 'Node 3', title: 'I have a popup!'},
    {id: 4, label: 'Node 4', title: 'I have a popup!'},
    {id: 5, label: 'Node 5', title: 'I have a popup!'}
]);

// create an array with edges
var edges = new vis.DataSet([
    {from: 1, to: 3},
    {from: 1, to: 2},
    {from: 2, to: 4},
    {from: 2, to: 5}
]);

// create a network
var container = document.getElementById('mynetwork');
var data = {
    nodes: nodes,
    edges: edges
};
var options = {interaction:{hover:true}};
this.network = new vis.Network(container, data, options);

I tried using only this in my environment; however, the popups don't show up like in the example. I know my hovering event works because I included this code to print to console when I hover over a node:

this.network.on("showPopup", function (params) {
    console.log("DO SOMETHING");
})

Is there some options setting that I'm missing here? Could there be some other issue as to why my hover popups don't show despite including the "title" property in my node objects?

Answer 1

Nothing is showing because you are using event on("showPopup"). You have to use on("hoverNode"). So use

network.on("hoverNode", function(){
  // functionality for popup to show on mouseover
});


network.on("blurNode", function(){
  // functionality for popup to hide on mouseout
});

For adding nodes its better to use

nodes.add()

Answer 2

I had the same issue. In my case it was a css issue. Make sure you import vis.min.css correcly. I had a typo in the link statement.