qtip.$domEle.qtip is not a function

[emmasuzuki]

I am getting qtip.$domEle.qtip is not a function error when I try to show qtip. When I debug through, qtip.$domEle returns div element but qtip (on the right) is undefined. I cannot understand what went wrong. How could I fix this?

var cytoscape = require('cytoscape');
var jquery = require('jquery');
var cyqtip = require('cytoscape-qtip');

cyqtip(cytoscape, jquery);

.....

cy.on('tap', 'node', function (event) {
  event.cyTarget.qtip({
     content: 'content'
  }, event);
});

Tech stack: ReactJS Cytoscape 2.7.10 jquery 2.2.4 qtip2: 2.2.0 cytoscape-qtip 2.5.2

[maxkfranz]

Basically, the latest version of Qtip2 doesn't work well with npm. I made a PR on their repo some time ago, but I haven't heard an answer: https://github.com/qTip2/qTip2/pull/810

There are some other limitations of Qtip2. That, coupled with the lack of updates, motivated a Popper.js extension for GSOC 2017. If the project gets accepted, we'll have a much more robust tooltip extension. And it won't require pulling in jQuery.

https://github.com/nrnb/GoogleSummerOfCode/issues/84

For now, you have to do something like this:

window.$ = window.jQuery = require('jquery');
require('qtip2');

[emmasuzuki]

Thank you! The change worked.

[merqlove]

i'm also found, that useful if we have here qtip2 as a peer dependency. https://github.com/cnsa/cytoscape.js-qtip/tree/peer

For typescript/webpack it works with similar changes in qtip2: https://github.com/cnsa/qTip2/tree/npm

[maxkfranz]

If you're using a modern build system, then qtip is required for you as an explicit dependency.