Not just falsey

As for now cytoscape.js-qtip requires "jQuery ^2.0 || ^1.10.0, as qTip requires it".

But qTip2 requires "jquery": ">=1.6.0", i.e. it allows 3.x versions too.

It should be possible to use jQuery 3.x, and it seems cytoscape.js-qtip won't break form this change too.

Motivation: npm audit shows "Cross-Site Scripting (XSS)" vulnerability for jQuery 2.x.

I'd just specify "jquery": ">=1.6.0" in peerDependencies as in qTip2.

Opening this issue instead of a pull request to make sure if jQuery 3.x was not disallowed intentionally.

Currently qTip is on version 3.0.3 and the dependency listed in package.json is:
"qtip2": "^2.2.0"

I'd like to including new line character such as '\n' in qtip content text.
e.g.)

cy.on('click', 'edge', function(e){
  var test = 'test'
  this.qtip({
    content: {text: `test\n${test}`}
});

But not work '\n'.
Is it had to finding other way instead of using '\n'?

The new 2.5.1 version has not been working for me. it simply returns either a warning or an error stating:

Query.Deferred exception: Cannot assign to read only property 'left' of object '#<ClientRect>' 
TypeError: Cannot assign to read only property 'left' of object '#<ClientRect>'

This error was also in Firefox, which issued the error:

jQuery.Deferred exception: setting a property that has only a getter z.reposition

2.4.0 worked well prior to this. Let me know if I can provide any other debugging information.
Thank you for all your work!
Joe

I am trying to always show a qtip on a node even if the node is moved.

In the free event, I am using the api of the qtip to show it and reposition it.

The reposition method of the API is not working in this case because the qtip is still shown at its original place.

I used the demo from https://gist.github.com/maxkfranz/546dd8ca4872cc87106a and I have modified the file code.js (I have tried to updload the modified demo as a Zip file however I keep getting the error "We don’t support that file type. Choose Files Try again with a PNG, GIF, JPG, DOCX, PPTX, XLSX, TXT, PDF, or ZIP.") :

$(function(){ // on dom ready

var cy = cytoscape({

container: document.getElementById('cy'),

boxSelectionEnabled: false,
autounselectify: true,

elements: {
nodes: [
{ data: { id: 'n', label: 'Tap me' } }
]
},

layout: {
name: 'grid',
padding: 100
},

ready: function(){
window.cy = this;
},

style: 'node { content: data(label); }'
});

// you can use qtip's regular options
// see http://qtip2.com/
var node = cy.$('#n').qtip({
content: 'Hello!',
position: {
my: 'top center',
at: 'bottom center'
},
style: {
classes: 'qtip-bootstrap',
tip: {
width: 16,
height: 8
}
},
show: {ready: true}
});

cy.on('free', function(evt){
var api = node.qtip('api');
api.reposition();
api.show();
api.reposition();
});

}); // on dom ready

The show event from a child gets propagated up to a parent node, and the parent tries to show its tooltip. The show and hide event handlers need checks that the element is the target of the event.

From adding a parent node to the demo.html and clicking on Jerry:

Hi,
I must show a popover when tne user mouseover on a node on my graph.
I add this line code

cy.nodes().qtip({ content: 'hi', position: { my: 'top center', at: 'bottom center' } })

but the popover is show at the end of the generic html div in which there is the graph drawed and not on single node

After updating to cytoscape 3 and the current cytoscape-qtip i can no longer show multiple qtips at different nodes, all are shown at the same node (the last one called)..
the problem was introduced with commit 7dbcff0
before that it was working correctly

Hi,

When a child node is clicked which is inside a compound node, qTip pops up for the parents of this clicked node too. You can try qtip demo of cytoscape-js with the following javascript code to reproduce the issue.

Thanks,

$(function(){ // on dom ready

var cy = cytoscape({

  container: document.getElementById('cy'),

  boxSelectionEnabled: false,
  autounselectify: true,

  elements: {
    nodes: [
      { data: { id: 'n', parent: 'k', label: 'Tap me' } },
      { data: { id: 'k', label: 'Tap me' } }

    ]
  },

  layout: {
    name: 'grid',
    padding: 100
  },

  ready: function(){
    window.cy = this;
  },

  style: 'node { content: data(label); }'
});

// you can use qtip's regular options
// see http://qtip2.com/
cy.nodes().qtip({
  content: 'Hello!',
  position: {
    my: 'top center',
    at: 'bottom center'
  },
  style: {
    classes: 'qtip-bootstrap',
    tip: {
      width: 16,
      height: 8
    }
  }
});

}); // on dom ready

Required for 2.5

I would like to show node specific data in qtip. I couldn't figure out how to do this without modifying the code, so I made a little change, by adding a ref to the element object

see this commit

so this way if content is a function, here is how you can access to the element the event triggered on.

$scope.cy.nodes().qtip({
    content: function(d,o){
      return o.options.ele.data().weight;
    },
    show: {
      event: 'mouseover'
    },
    hide:{
      event: 'mouseout'
    },
    position: {
      my: 'top center',
      at: 'bottom center',
      adjust: {
        cyViewport: true
      }
    },
    style: {
      classes: 'qtip-bootstrap',
      tip: {
        width: 16,
        height: 8
      }
    }
  });

Is there other (better) way to do this?

By using the library, the tooltip for nodes is working completely fine but for the edges, they are displayed at the top right corner of the screen. I am using the same code for both nodes and edges. Below is the code that I tried:

cy.edges().qtip({
    content: function () {
        return 'Expression: ' + this.data('value')
    },
    position: {
        my: 'top center',
        at: 'bottom center'
    },
    style: {
        classes: 'qtip-bootstrap',
	tip: {
		width: 16,
		height: 8
	}
    },
    show: {
	event: 'click',
	solo: true,
	effect: function (offset) {
		$(this).slideDown(100); // "this" refers to the tooltip
	}
    }
});

I also tried with target: mouse without using this library but the result were the same:

cy.on('tap', 'edge', function (evt) {
    evt.target.qtip({
        content: function () {
	    return 'Expression: ' + this.data('value')
        },
	position: {
	    target: 'mouse'
	},
	style: {
	    classes: 'qtip-bootstrap',
	    tip: {
	        width: 16,
		height: 8
	    }
	},
	show: {
	    event: 'click',
	    solo: true,
	    effect: function (offset) {
	        $(this).slideDown(100); // "this" refers to the tooltip
	    }
	}
    });
});

Hi as per

http://stackoverflow.com/questions/35379725/how-to-show-all-qtips-in-cytoscape-js-on-button-click

Is it possible to show all qtips manually when a button is pressed? I have multiple qtips for certain types of nodes and I want to be able to toggle between having them show or not. When I try the code above I get an error. See the link.

Many thanks for all of your great work on this.

I am facing an issue where am getting the correct position of tooptip for Nodes but for edges it is showing the tooltip on top left corner of the screen.
While looking into the jQuery qtip library, jquery.qtip.js, i have found that for egdes the "target" option of "position" is an array of two elements [0,0] due to which tooltip appearing on the top left of the screen whereas for Nodes it's not an array hence correct position of tooptip.
This seems to be the possible reason of this problem.
Another observation is that, in cytoscape-qtip.js library, in updateposition function there is a variable used "isNode", which make this function and position setting for Nodes only and not for any other element.

I have checked the Demo example at the following link:
https://github.com/cytoscape/cytoscape.js-qtip

Using the cytoscape-qtip.js file from there, i can see the tooltip bubble box at correct position for edges.

But, i am getting the tooltip bubble box at [0,0] location i.e top left corner of screen as well. So there are 2 tooltip bubble box appearing at the same time, one at the correct mouse location on edge, other one at the [0,0] location i.e top left corner of screen.

when i comment out the following line in cytoscape-qtip.js, the problem of extra tooltip bubble box at [0,0] location is resolved:
opts.position.target = [0, 0]; // Line no. 201

Could any help, how to proceed on this.

Thanks & Regards.

https://stackoverflow.com/questions/31604278/cytoscape-js-qtip-show-delay-not-working

May require additional code or a revised qtip triggering mechanism.

I'm using webpack & react and getting an error where qtip.$domEle.qtip( opts ); is not a function. I have seen a similar issue #22 where the solution was to require jquery before registering the crytoscape-qtip extension. However, this did not fix the issue. After further investigation I noticed that you added this #hack to the cytoscape-qtip library already.

I then tried just passing in jQuery directly to cytoscape-qtip and had some success, the register methods became the following:

Webpack:

plugins: [
  new webpack.ProvidePlugin({
    '$': 'jquery',
    'jQuery': 'jquery',
    'window.jQuery': 'jquery',
    'window.$': 'jquery'
  })
],

My App:

import cytoscape from 'cytoscape'
import qtip from 'qtip2'
import cyqtip from 'cytoscape-qtip'
cyqtip(cytoscape, window.jQuery)

renderCytoscape = (graphData) => {
    cy.on('tap', 'node', function(event) {
        event.target.qtip({
            content: 'this is content'
        }, event)
    })
}

cytoscape-qtip:

if( typeof module !== 'undefined' && module.exports ){ // expose as a commonjs module
    module.exports = function( cytoscape, jQuery ){
        register( cytoscape, jQuery );
    };
} else if( typeof define !== 'undefined' && define.amd ){ // expose as an amd/requirejs module
    define('cytoscape-qtip', function(){
        return register;
    });
}

After this the position of the tooltip when I select a node is correct, I can see the hidden div. However, the qtip tooltip will be displayed offscreen or sometimes is not generated at all.

The most common case for Qtips is only one is shown at a time and all elements in one call have the same behaviour.

If this case can be reliably detected, this would increase performance for large graphs when calling eles.qtip().

Having an issue removing a qtip from cytsoscape nodes. Because the DOM elements are added on demand, qtip crashes when you try to run cy.elements('node').qtip("destroy"); - it says, cannot read property set of undefined. Qtip doesn't let you "overwrite" the qtip - it just renders two qtips on top of each other. Similarly, using the api method,
cy.elements('node').qtip('api').destroy();, although it doesn't cause an error, fails to actually remove the qtips.
Updating qtips according to their documentation cy.elements('node').qtip('option', 'content', 'newcontent'); gives a similar error.

When options.hide.cyViewport is false the qtips are still visible on panning/zooming but their positions don't update

Hi & congrats for your plugins.
I'm using to display multiple information related to a node but I've a problem.

the code works fine when I click on the node.
If I click on the node label (content) qTip doesn't appear.

I try to add cy.emit to trigger node tap with no luck
I also try to change the selector of cy.$('#myid').qTip... in cy.$('#myid, #myid:after, #myid:before').qTip... (hoping that 'content' attribute was "that" kind of content but it doesn't work yet.

Is it possible to achieve this task?
How?

Thank you in advance
ronkpunk

Great stuff, thank you.

I notice in the preview image that the qtips can be placed at various locations on the cytoscape elements, e.g. bottom center:

However, when I clone the repo (git rev-parse HEAD = 72be0c8) and render demo.html in Safari and Firefox, the tips appear only in the center of a node.

Looking at the demo.html source, it seems to intend that they display at the bottom center as in the preview image above:

Any thoughts?

The content.title option is ignored during qtip initialization. eg:

elem.qtip({
  content: {
    title: 'My Title'
  }
});

or

elem.qtip({
  content: {
    title: function (event, api) {
      api.set('content.title', 'My Title');
    }
  }
});

In this block it looks like content.title is neglected, but it should receive the same treatment as content.text. An easy workaround is to call api.set('content.title', 'My Title'); from within my content.text function.

The position.target option is ignored during qtip initialization, and is always set to [0, 0] here. I was interested in using:

elem.qtip({
  position: {
    target: 'mouse'
  }
});

I'm sure this is related to how you've adapted qtip to work with non-HTMLDomElements, so position.target = 'mouse' may not be feasible, but I thought it should be documented.

Is it possible to have qtip be shown on

1. As context menu , means by right clicking element
2. Show on hover(mouse-over) instead of left click (so that I can do another action on left click). should be configurable to hide qtip on mouse-out or not so that user can interact with html in qtip

These 2 will be very helpful additions to qTip

I am creating this issue again because this was closed and no one would reply on issue if it is closed.

qtip2 (right-clicks work )

1. qtip2 supports showing tootip on right-clicks
2. see reference here http://qtip2.com/guides#events.rightclick
3. see working jsfiddle https://jsfiddle.net/bababalcksheep/L56sd6ye/

cytoscape.js-qtip (right-clicks do not work)

1. right-clicks do not work with cytoscape.js-qtip
2. Does cytoscape.js support right-click ?
3. See jsfiddle (cytoscape.js-qtip with right-click) https://jsfiddle.net/bababalcksheep/84s18jyx/
   -- uses options from http://qtip2.com/guides#events.rightclick

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