Not show qtip on node on React Project

[luli-isa]

Hi, I must show a popover when tne user mouseover on a node on my graph. I add this line code

cy.nodes().qtip({ content: 'hi', position: { my: 'top center', at: 'bottom center' } })

but the popover is show at the end of the generic html div in which there is the graph drawed and not on single node

[maxkfranz]

See https://github.com/cytoscape/cytoscape.js-qtip/issues/27#issuecomment-298685167

You probably have body { position: static; }

[luli-isa]

I try change the body from static to absolute position but It doesn't work :-(

[maxkfranz]

Maybe you're missing the qtip stylesheet?

[gflowers2012]

Having an issue where the tooltip is showing outside of the container region for the cytoscape graph.

Code below:

`let cy1 = cytoscape({

  container: conf,
  elements: CytospaceGraphData.elements,
  layout: options,

  style: [
    {
      selector: 'node',
      style: {
        'content': 'data(label)'
      }
    },
    {
      selector: 'edge',
      style: {
        'mid-target-arrow-color': 'black',
        'mid-target-arrow-shape': 'triangle',
        'arrow-scale': '3'
      }
    }
  ]
});

cy1.on('click', 'node', function (e) {
  console.log(e);

  var x = e.position.x;
  var y = e.position.y;

  e.target.qtip({
    overwrite: false, // Make sure the tooltip won't be overridden once created
    content: 'Hello!',
    position: {
      my: 'top center',
      at: 'bottom center',
      target: [x + 3, y + 3],
      adjust: { x: 7, y: 7 }
    },
    hide: {
      event: 'click',
      fixed: true,
      event: false,
      inactive: 2000
    },
    style: {
      classes: 'qtip-bootstrap',
      width: 200,
      tip: {
        corner: true,
        width: 24,
        height: 24
      }
    }
  }, event); // Pass through our live event to qTip
});`