cytoscape / cytoscape.js-qtip

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

qTip is rendered for all parent elements when a child node is clicked. #16

Closed istemi-bahceci closed 8 years ago

istemi-bahceci commented 8 years ago

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.

image

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
maxkfranz commented 8 years ago

Events bubble up to compound parents, just as events bubble on div parents in the DOM. You'll have to use a custom event for compounds, e.g.

nodes.qtip({ show: { event: 'directtap' } });

nodes.on('tap', function( e ){
  var eventIsDirect = e.cyTarget === this;

  if( eventIsDirect ){
    this.trigger('directtap');
  }
});
istemi-bahceci commented 8 years ago

@maxkfranz Thanks :) :+1: