0

I've been trying using popper extension of cytoscape.js, starting with the code I found on the web in order to do it, at https://codepen.io/rbogard/pen/mdyRPew

It woks quite well when initializing a graph and calling the popper creation when the rendered graph is ready for the user.

However I would like a popper to be created each time I'm adding a new node to the graph.

What I did is to call exactly the same function than the one call on cy.ready, which works perfectly well, on the event consisting to add a graph element.

The function makePopper is effectively called, however no popper appears when putting the mouse over the new added element.

cy.ready(function() {
  cy.elements().forEach(function(ele) {
    makePopper(ele);
  });
});

cy.on('add', function(ev) { 
  log("call poper")
  makePopper(ev.target);
})

I've been searching any exemple related to what I want to do, without success.

So I would like to know if someone already tried this, and has a solution for the dynamic update of poppers each time a new element is added to the graph.

Thanks in advance.

Nicolas Figay
  • 11
  • 3
  • You should also add `mouseover` and `mouseout` events. That's how the popper is shown like `event.target.tippy.hide()`. By the way, the function definitions on these events are not readable. They should be better. – canbax Mar 23 '22 at 10:54
  • Thanks for the feedback. In fact I added the events, and it is the reason why it works well on the graph initially loaded as soon as the cy.ready event is issued. The problem is that if I add new nodes to the graph, it doesn't work. Or do I have also to add mouveover and mouseout events in addition for the new created nodes? – Nicolas Figay Mar 23 '22 at 18:12

1 Answers1

0

You didn't get what I said. You call

cy.elements().bind('mouseover', (event) => event.target.tippy.show());

just once at the beginning. You add MORE elements. So the new elements do NOT have such an event listener. So actually as you add new elements, you should attach new event listeners like

cy.on('add', (event) => {
  event.target.bind('mouseover', (event2) => {
    event2.target.tippy.show();
  })
});

In this case, you also need to remove your event listeners when an element is removed

cy.on('remove', (event) => {
  event.target.unbind('mouseover');
});

The best way is NOT to add events listener to the elements. Instead, you can add an event listener to the core like below.

cy.bind('mouseover', 'node', (event) => {
  event.target.tippy.show();
})

The above event listener will be fired whenever a node has hovered. Also, note that you should also call cy. unbind to unbind your event listener. This is for preventing memory leaks and strange bugs that might occur after cytoscape is destructed.

canbax
  • 3,432
  • 1
  • 27
  • 44