Make qtip mouseover with a Cytoscape.js example

Question

I'm trying to make a qtip that shows the node name when you mouseover it using the Wine & Cheese example from cytoscape.js

I have already tried to make this solution work, but couldn't: How to add tooltip on mouseover event on nodes in graph with cytoscape.js.

I placed this modified version inside the initCy function of the demo.js file:

cy.on('mouseover', 'node', function(event){

      var target = event.cyTarget;
      var sourceName = target.data("name");
      console.log(event);
      console.log(sourceName);

      var x = event.cyPosition.x;
      var y = event.cyPosition.y;                 

      $("#hovertip").qtip({
        content: {
          text: sourceName,
        },
        show: {
          delay: 0,
          event: true,
          ready: true,
        },
        position: {
          my: 'bottom center',
          at: 'top center',
          target: [x+3, y+3]
        },
        hide: {
          fixed: true,
          event: false,
          inactive: 2000
        },
        style: {
          classes: 'qtip-bootstrap .qtip-titlebar',
          tip:
          {
            corner: true,
            width: 24,         // resize the caret
            height: 24         // resize the caret
          }
        }
      });
    });

I created an empty div on index.html to hold the event: <div id="hovertip"></div>

When I select the top node of it, it shows a qTip, but it is weirdly placed and that only occurs for that first node.

If I hover a different node, it returns the following error:
Uncaught TypeError: Cannot set property 'event' of null

Answer 1

I managed to find the answer. Using the "info" box that appears when a node is clicked, is now appears as well when you move the mouse over a node. A similar way to make the infobox hide when you mouse out the node can be made using the mouseout event, but it is too fast.

cy.on('mousemove', 'node', _.debounce( function( event ){
      var target = event.cyTarget;
      var sourceName = target.data("name");
      console.log(event);
      console.log(sourceName);

      if( target.nonempty() ){
        showNodeInfo( target );
      } 
    }, 100) );