Get started with cytoscape-popper CDN

// Import required libraries
import cytoscape from 'cytoscape';
import popper from 'popper.js/dist/umd/popper.min.js';
import CytoscapePopper from 'cytoscape-popper';

// Initialize Cytoscape
const cy = cytoscape({
  container: document.getElementById('cy'),
  elements: {
    nodes: [
      { data: { id: 'node1', label: 'Node 1' } },
      { data: { id: 'node2', label: 'Node 2' } },
    ],
    edges: [
      { data: { source: 'node1', target: 'node2' } },
    ],
  },
  layout: { name: 'preset' },
});

// Initialize Popper
popper.Defaults.modifiers.push({ name: 'offset', options: { offset: [10, 10] } });

// Initialize CytoscapePopper
CytoscapePopper(cy, {
  position: 'right',
  arrowSize: 5,
  arrowShape: 'triangle',
  hideArrow: false,
});

// Set tooltip for a node
cy.nodes().first().tooltip({ content: 'This is Node 1' });

// Show tooltip on hover
cy.nodes().first().on('mouseover', () => {
  cy.tooltip('show');
});

// Hide tooltip on mouseout
cy.nodes().first().on('mouseout', () => {
  cy.tooltip('hide');
});