plotly / react-cytoscapejs

React component for Cytoscape.js network visualisations
MIT License
472 stars 69 forks source link

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

Closed nitinreddy3 closed 5 years ago

nitinreddy3 commented 5 years ago

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

maxkfranz commented 5 years ago

Anything imperative should use the cy ref.

nitinreddy3 commented 5 years ago

Ok Thanks

SimonGolms commented 4 years ago

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;
      }}
    />
  );
};