How to fix missing hover tooltip

[SamOutlan]

I am using neovis.js on my Angular (currently v13.1.4) web app. I am not able to get the hover functionality to work (ex. when hovering over a node or edge no tooltip appears).

  const config = {
      containerId: 'viz',
      interaction: {
        click:true,
        hover: true,
       },
      visConfig: {
        nodes: {
          borderWidth: 2,
          borderWidthSelected: 5,
        },
        edges: {
          color: 'gray',
          arrows: {
            to: {enabled: true}
          }
        },
      },
      labels: {
                Donor: {
                    value: "donorID",
                        label: "name"
                    group: "donorCategory"
                },
                SuperPac: {
                    value: "id",
                        label: "name"
                }
              },
      relationships: {
                CONTRIBUTED_TO_2014: {
                  label: "amountYearDisplay",
                }
      },

      initialCypher: `MATCH p=(d:Donor)-[r:CONTRIBUTED_TO_2014]->(s:SuperPac) RETURN p ORDER BY r.amountYear DESC`
    };

    const viz = new NeoVis(config);
    console.log(viz);
    viz.render();

[FStriewski]

I had a similar issue with React and with a lot of trial and error I figured it out.

You can set the default tooltip on specific nodes like this.

 labels: {
          Person: {
            label: "name",
            [Neovis.NEOVIS_ADVANCED_CONFIG]: {
              static: {
                color: "blue",
                border: "#ffffff",
              },
              function: {
                title: Neovis.objectToTitleHtml,     // <---------------------
              },
            },
          },
          Abstract: { label: "title" },
          Organisation: { label: "name" },
          Partner: { label: "name", title: "type" },
        },

If you want to register a handler for DIY stuff, onClick works out of the box with Neovis:

    let vis;
      const config = {    
        containerId: "viz",
        neo4j: {
          serverUrl: "...",
          serverUser: "...",
          serverPassword: "...",
        },
        visConfig: {
          nodes: {...},
         edges: {...},
      };
      vis = new Neovis(config);

      vis.registerOnEvent("clickNode", (e) => {  // <-------------------
        console.info(e.node.raw.properties);
        setNode(e.node.raw.properties);
      });

For hovering however, vis needs you to change the options. See the documentation here: https://visjs.github.io/vis-network/docs/network/interaction.html . So the handler looks like this:

      vis.registerOnEvent("completed", (e) => {
        vis.network.interactionHandler.options.hover = true;   // <-----------IMPORTANT
        console.log(vis.network.interactionHandler.options);
        vis.network.on("hoverNode", (event) => {
          console.log(event);
        });
      });

Note that you can only access the network property after the rendering is complete