cytoscape.js-qtip extension: qtip.$domEle.qitp is not a function

Question

I'm encountering the error message Uncaught TypeError: qtip.$domEle.qtip is not a function when trying to create a qtip tooltip for a cytoscape node in an AngularJS directive.

My code looks like this:

function graphDirective() {
  return {
    restrict: 'E',
    templateUrl: 'app/graph/graph.html',
    link() {
      const cytoscape = require('cytoscape');
      const jquery = require('jquery');
      const cyqtip = require('cytoscape-qtip');
      cyqtip(cytoscape, jquery);

      const cy = cytoscape({
        container: document.querySelector('graph #cy')
      });

      cy.add({
        nodes: [
          {
            data: {
              id: 'test'
            }
          }
        ]
      });

      cy.$('#test').qtip({
        content: 'Hello!'
        style: {
          classes: 'qtip-bootstrap'
      });
    }
  };
}

export default graphDirective;

I have already gone through this quite similar thread, but as jQuery is required via CommonJS before cytoscape.js-qtip, this solution does not fit too well.

Does anyone know how to fix this? Thank you in advance.

Edit: Fixed typing error in code example.

There's not enough info here to reproduce the issue. Try reproducing your issue in a simpler setup without Angular and/or create a full running example that reproduces your issue on Jsbin or Codepen etc. If you can reproduce the issue in a full example and the issue is not your own, file a bug in the issue tracker for the extension — maxkfranz, Jul 28 '16 at 13:12

score 0 · Answer 1 · answered Jul 26 '16 at 18:59

0

I suspect you have a problem with your selector:

cy.$('test')

This should probably be either:

cy.$('#test')

...if you are looking for a node by it's ID. Or:

cy.$('.test')

...if you are looking for nodes by class.

For more on selectors: http://js.cytoscape.org/#selectors

answered Jul 26 '16 at 18:59

peteorpeter

4,037
2
29
47

Thank you for your answer, this just has been a typing error put in while generalizing the code example, so the error still occurs. Do you have any other idea? – mkqavi Jul 27 '16 at 08:54

score 0 · Answer 2 · answered Feb 07 '19 at 09:16

In my case yarn installed two versions of jQuery simultaneously: 2.x and 3.x.

If you run into the same issue, the solution is easy - just add this property to your package.json.

"resolutions": { 
  "jquery": "2.2.4" //or whatever version that satisfies all requirements
}

cytoscape.js-qtip extension: qtip.$domEle.qitp is not a function

2 Answers2