Child node qtips don't get displayed properly

[somedmguy]

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:

[maxkfranz]

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

From that issue:

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');
  }
});

[0xdabbad00]

My event e does not have a cyTarget attribute. Instead I am using e.target and I have to call e.stopPropagation(); so my code is:

cy.elements().on('tap', function( e ){
  var eventIsDirect = e.target === this;
  console.log(e);
  if( eventIsDirect ){
    e.stopPropagation();
    this.trigger('directtap');
  }
});

However, multiple qtips still display for each of the compound parent nodes. Am I doing something wrong such that I don't have a cyTarget? I tested with the demo.html and it does not seem to have a .cyTarget either.

[0xdabbad00]

I fixed this by modifying https://github.com/cytoscape/cytoscape.js-qtip/blob/486d567eb5456ea4bd77d950186053e4f6269e38/cytoscape-qtip.js#L312 to add a e.stopPropagation(); to this extension.

[maxkfranz]

The extension shouldn't be changed. Just make sure the directtap doesn't bubble:

cy.nodes().qtip({
  show: { event: 'directtap' },
  content: function(){ return 'Example qTip on ele ' + this.id() },
  position: {
    my: 'top center',
    at: 'bottom center'
  },
  style: {
    classes: 'qtip-bootstrap',
    tip: {
      width: 16,
      height: 8
    }
  }
}).on('tap', function( e ){
  var eventIsDirect = e.target.same( this ); // don't use 2.x cyTarget

  if( eventIsDirect ){
    this.emit('directtap');
  }
}).on('directtap', function( e ){
  e.stopPropagation();
});

[0xdabbad00]

That worked. Thank you @maxkfranz