He estado intentando usar la extensión popper de cytoscape.js, comenzando con el código que encontré en la web para hacerlo, en https://codepen.io/rbogard/pen/mdyRPew
Funciona bastante bien al inicializar un gráfico y llamar a la creación del popper cuando el gráfico renderizado está listo para el usuario.
Sin embargo, me gustaría que se creara un popper cada vez que agregue un nuevo nodo al gráfico.
Lo que hice fue llamar exactamente a la misma función que la llamada en cy.ready, que funciona perfectamente bien, en el evento que consiste en agregar un elemento gráfico.
La función makePopper se llama efectivamente, sin embargo, no aparece ningún popper al colocar el mouse sobre el nuevo elemento agregado.
cy.ready(function() { cy.elements().forEach(function(ele) { makePopper(ele); }); }); cy.on('add', function(ev) { log("call poper") makePopper(ev.target); })He estado buscando algún ejemplo relacionado con lo que quiero hacer, sin éxito.
Entonces, me gustaría saber si alguien ya probó esto y tiene una solución para la actualización dinámica de poppers cada vez que se agrega un nuevo elemento al gráfico.
Gracias por adelantado.
No entendiste lo que dije. Llama
cy.elements().bind('mouseover', (event) => event.target.tippy.show());
solo una vez al principio. Agregas MÁS elementos. Entonces, los nuevos elementos NO tienen un detector de eventos de este tipo. Entonces, en realidad, a medida que agrega nuevos elementos, debe adjuntar nuevos detectores de eventos como
cy.on('add', (event) => { event.target.bind('mouseover', (event2) => { event2.target.tippy.show(); }) });En este caso, también debe eliminar sus detectores de eventos cuando se elimina un elemento.
cy.on('remove', (event) => { event.target.unbind('mouseover'); });La mejor manera es NO agregar un detector de eventos a los elementos. En su lugar, puede agregar un detector de eventos al núcleo como se muestra a continuación.
cy.bind('mouseover', 'node', (event) => { event.target.tippy.show(); }) El detector de eventos anterior se activará cada vez que un nodo haya pasado el mouse. Además, tenga en cuenta que también debe llamar a cy. unbind para desvincular su detector de eventos. Esto es para prevenir fugas de memoria y errores extraños que pueden ocurrir después de que se destruye cytoscape.