removing a qtip bug about cytoscape.js-qtip HOT 8 CLOSED

Thanks for the information. This looks like a bug, so it will be looked into soon.

from cytoscape.js-qtip.

After looking at this:

(1) ele.qtip("destroy") is not documented anywhere. I don't know how you decided to call that, as it doesn't exist as an option.

(2) cy.elements('node').qtip('api').destroy(); This works just fine on the demo page.

from cytoscape.js-qtip.

I believe this works on the demo page because the qtips are always shown. When you set the qtips to only show on mouse hover, destroying the qtips was working for the ones I had hovered over, but did not work for the ones I had not yet hovered over.

Also, (1) was an option in an older version of the qtip API - just figured it was worth a try.

from cytoscape.js-qtip.

@Kkevsterrr

Are you doing

(A) ele.qtip({ show: { event: 'mouseover' } })

or

(B) ele.on('mouseover', function(){ ele.qtip(...) })

?

As far as I know, (A) is the proper way to do things according to the qtip docs -- and the api object should be non-null after that call.

If you use (B), you can't really avoid having to do a null check when you access the qtip api object.

from cytoscape.js-qtip.

If you're using (B) because you want to use delegate selectors for elements not yet added to the graph, you can translate that to (A):

cy.on('mouseover',  'node', function(){
  this.qtip(...); // options that show qtip now
});

becomes

cy.on('add',  'node', function(){
  this.qtip({ show: { event: 'mouseover' }, ... }); // options that show qtip later on mouseover
});

That way, you guarantee the api object is always available for an element.

from cytoscape.js-qtip.

My goal is to be able to dynamically update the tooltips of the graph. My current code for displaying the tooltips is this:

cy.elements('node').qtip({
    content: function() {return get_qtip(this.data("id"), this.data("ip"), data)},
    position: {
        my: 'top center',
        at: 'bottom center'
    },
    show: { event: 'mouseover'  },
    hide: { event: 'mouseout' },
    style: {
            classes: 'qtip-bootstrap',
            tip: {
                width: 16,
                height: 8
             }
     }
});

I could never get qtip updating to work, so my solution was going to be remove all of the qtips and re-add them at each update. Both updating them and removing them though seem to fail for the same reason. Hopefully this helps clarify, and thank you so much for your help!

from cytoscape.js-qtip.

@maxkfranz Any progress on this? The solutions you suggested unfortunately did not remedy my problem, and any help would be appreciated!

from cytoscape.js-qtip.

cy.$('#id').qtip({
content: function() {
var btn = $('X');
return btn;
},
position: {
my: 'top center',
at: 'bottom center'
},
style: {
classes: 'qtip-bootstrap',
tip: {
width: 16,
height: 8
}
}
});

from cytoscape.js-qtip.