javascriptcytoscape.jsqtip2qtip

Cytoscape.js cannot read property 'qtip' of undefined

I'm trying to use Qtip in addition to Cytoscape.js to show tooltip on mouseover nodes. I followed the guide there but I'm unable to make it works, I get this error when my mouse is over a node : enter image description here

This is the code related to the error :

cy.on('mouseover', 'node', function(event) {
    var node = event.cyTarget;
    node.qtip({
         content: 'hello',
         show: {
            event: event.type,
            ready: true
         },
         hide: {
            event: 'mouseout unfocus'
         }
    }, event);
});

Here's my index where I call the .js files :

<!DOCTYPE>
<html>
  <head>
    <title>cytoscape-dagre.js demo</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <link href="css/style.css" rel="stylesheet" />
    <link type="text/css" rel="stylesheet" href="css/jquery.qtip.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  </head>
  <body>
    <div id="cy"></div>
    <script type="text/javascript" src="json/data_error.json"></script>

    <script src="js/jquery.qtip.min.js"></script>
    <script src="js/cytoscape.min.js"></script>
    <script src="js/cytoscape-qtip.js"></script>
    <script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
    <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>

    <script src="js/code.js"></script>
  </body>
</html>

What I'm doing wrong ? Many thanks !

Solution

  • The mistake is the var node = event.cyTarget, there is no such property as cyTarget, so just call event.target and you are gucci:

    var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),

  boxSelectionEnabled: false,
  autounselectify: true,

  style: [{
      selector: 'node',
      css: {
        'content': 'data(id)',
        'text-valign': 'center',
        'text-halign': 'center',
        'height': '60px',
        'width': '60px',
        'border-color': 'black',
        'border-opacity': '1',
        'border-width': '10px'
      }
    },
    {
      selector: '$node > node',
      css: {
        'padding-top': '10px',
        'padding-left': '10px',
        'padding-bottom': '10px',
        'padding-right': '10px',
        'text-valign': 'top',
        'text-halign': 'center',
        'background-color': '#bbb'
      }
    },
    {
      selector: 'edge',
      css: {
        'target-arrow-shape': 'triangle'
      }
    },
    {
      selector: ':selected',
      css: {
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      }
    }
  ],
  layout: {
    name: 'circle'
  }
});

var info = [{
  "name": "Peter",
  "next_op_name": "Claire",
}, {
  "name": "Claire",
  "next_op_name": "Mike",
}, {
  "name": "Mike",
  "next_op_name": "Rosa",
}, {
  "name": "Rosa",
  "next_op_name": "Peter",
}];

cy.ready(function() {
  var array = [];
  // iterate over info once
  for (var i = 0; i < info.length; i++) {
    array.push({
      group: 'nodes',
      data: {
        id: info[i].name, // id is name!!!
        label: info[i].name
      }
    });
    array.push({
      group: 'edges',
      data: {
        id: 'e' + i,
        source: info[i].name,
        target: info[i].next_op_name
      }
    });
  }
  cy.add(array);
  cy.layout({
    name: 'circle'
  }).run();
});


// Important part
cy.on('mouseover', 'node', function(event) {
  var node = event.target; // cy.target is the right choice here
  node.qtip({
    content: 'hello',
    show: {
      event: event.type,
      ready: true
    },
    hide: {
      event: 'mouseout unfocus'
    }
  }, event);
});
    body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 75%;
  position: absolute;
  left: 0;
  top: 0;
  float: left;
}
    <html>

<head>
  <meta charset=utf-8 />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
  <!-- qtip imports -->
  <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.js"></script>
  <link href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
  <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-qtip/2.7.0/cytoscape-qtip.js"></script>

  <!-- dagre imports -->
  <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
  <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>