cytoscape / cytoscape.js-qtip

A Cytoscape.js extension that wraps the QTip jQuery library
MIT License
41 stars 35 forks source link

reference to $$.element #1

Closed bvarga closed 10 years ago

bvarga commented 10 years ago

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?

maxkfranz commented 10 years ago

Call qtip each show:

cy.on('tap', 'node', function(){
  this.qtip({ content: this.data('weight') });
});

Call qtip on each element directly:

cy.nodes().each(function(){
  this.qtip({ content: this.data('weight') });
});

I've also added a change to master to override the reference to this inside content():

cy.nodes().qtip({
  content: function(){ return this.data('weight'); }
});
bvarga commented 10 years ago

Oh, I see, thanks.