cytoscape.js-qtip right-click event

cytoscape.js-qtip right-click event

by Rishi Kumar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.5.2/cytoscape.min.js"></script>
<script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
<h1> Cytoscape.js qTip with right-click</h1>

<div id="cy"></div>

CSS

body,
html {
  font-family: helvetica;
  font-size: 14px;
  width: 100%;
  height: 100%;
  position: absolute;
  padding: 0;
  margin: 0;
}

#cy {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
}

h1 {
  opacity: 0.5;
  font-size: 1em;
  margin: 0.25em;
}

JavaScript

$(function() {
  //
  //
  //
  var cy = window.cy = cytoscape({
    container: document.getElementById('cy'),
    ready: function() {},
    layout: {
      name: 'dagre',
      rankDir: 'BT'
    },
    style: [{
      selector: 'node',
      css: {
        'content': 'data(name)'
      }
    }, {
      selector: 'edge',
      css: {
        'target-arrow-shape': 'triangle',
        'line-color': 'blue',
      }
    }, {
    	selector: 'edge.taxi',
      css: {
      'source-endpoint': 'outside-to-node',
        'target-endpoint': 'outside-to-node',
      	'curve-style': 'taxi',
        'line-color': 'red',
        "taxi-direction": "auto",
        "taxi-turn": 20,
        "taxi-turn-min-distance": 5,
        
      }
    }],
    elements: {
      nodes: [{
        data: {
          id: 'b',
          name: 'beta'
        }
      },{
        data: {
          id: 'a',
          name: 'alpha'
        }
      },{
        data: {
          id: 'j',
          name: 'Jerry'
        }
      }, {
        data: {
          id: 'k',
          name: 'Kramer'
        }
      }],
      edges: [{
        data: {
          source: 'b',
          target: 'j'
        },
        "classes": "taxi"
      },{
        data: {
          source: 'a',
          target: 'j'
        },
        "classes": "taxi"
      }, {
        data: {
          source: 'k',
          target: 'j'
        },
        "classes": "taxi"
      }]
    }
  });
  //
  //
  //
});