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

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?

user_10642030 · Answer

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.

user_13024638 · Answer

This is happening because you might not be importing the vis-network CSS. You can import the standalone version of vis-network and it will automatically import the CSS.

import { Network } from 'vis-network/standalone';

user_224653 · Answer

You need to set the CSS

.vis-tooltip {
    position: absolute;
  }

Otherwise the tooltip while appearing is hidden.

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

4 Answers