How to create poppers on new created Cytoscape.js graph elements?

Question

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.

Answer 1

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.