Do we have a sample code for tooltip implementation on graph elements ?

[nitinreddy3]

Can we have a sample code for tooltip implementation on graph elements?

[maxkfranz]

Anything imperative should use the cy ref.

[nitinreddy3]

Ok Thanks

[SimonGolms]

In case someone else comes here and is still looking for a solution. Here's how I was able to solve it with the cytoscape-popper extension and a reference to https://github.com/cytoscape/cytoscape.js-popper/issues/35:

import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

import Cytoscape from 'cytoscape';
import CytoscapeComponent from 'react-cytoscapejs';
import popper from 'cytoscape-popper';

import { Button } from 'semantic-ui-react';

Cytoscape.use(popper);

const ReactButton = () => {
  return <Button type="button">React Button</Button>;
};

const createContentFromComponent = (component) => {
  const dummyDomEle = document.createElement('div');
  ReactDOM.render(component, dummyDomEle);
  document.body.appendChild(dummyDomEle);
  return dummyDomEle;
};

export const OmniGram = () => {
  const cyRef = useRef(null);
  const cyPopperRef = useRef(null);

  useEffect(() => {
    const cy = cyRef.current;

    cy.nodes().on('mouseover', (event) => {
      cyPopperRef.current = event.target.popper({
        content: createContentFromComponent(<ReactButton />),
        popper: {
          placement: 'right',
          removeOnDestroy: true,
        },
      });
    });

    cy.nodes().on('mouseout', () => {
      if (cyPopperRef) {
        cyPopperRef.current.destroy();
      }
    });
  }, []);

  const elements = {
    ...
  };

  return (
    <CytoscapeComponent
      elements={elements}
      cy={(cy) => {
        cyRef.current = cy;
      }}
    />
  );
};