Vis.js: Adding showPopup in react style

Question

I have a question to ask regarding vis.js popup option. Currently I am trying to implement it in react style so I was using https://github.com/crubier/react-graph-vis/tree/master/example as a starting point.

I realized that in src\\index.js file I can add events array since I realize the select option is in there. However, when I do the following:

const events = {
  select: function(event) {
    var { nodes, edges } = event;
    console.log("Selected nodes:");
    console.log(nodes);
    console.log("Selected edges:");
    console.log(edges);
   },
  showPopup: function(event) {
     document.getElementById('root').innerHTML = '<h2>showPopup event</h2>'+ JSON.stringify(params, null, 4);
  }
};

I am not able to trigger the popup even at all. Inside the lib\\index.js, I noticed that the code is supposed to loop over the events array:

  var _iteratorNormalCompletion2 = true;
        var _didIteratorError2 = false;
        var _iteratorError2 = undefined;

        try {
          for (var _iterator2 = Object.keys(events)[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
            var _eventName = _step2.value;
            this.Network.on(_eventName, events[_eventName]);
          }
        } catch (err) {
          _didIteratorError2 = true;
          _iteratorError2 = err;
        } finally {
          try {
            if (!_iteratorNormalCompletion2 && _iterator2.return) {
              _iterator2.return();
            }
          } finally {
            if (_didIteratorError2) {
              throw _iteratorError2;
            }
          }
        }
      }

and I checked that vis.js has the popup option according to the documentation which can be found here: http://visjs.org/docs/network/

I am currently stuck on figuring out how to trigger the popup. There is a requirement to use react since the application will be based on it. It would be great if someone can point out what I did wrong.

Thanks in advance. XD

NOTE: This question is in regards to the github project that I am trying to build on top of. Therefore it is a little different because I am not taking a barebone vis.js

Answer 1

You are mixing things up. showPopup is an event, a function that is called when the popup is shown. You do not call it to show the popup.

To show the popup you simply hover over a node that has a title property .

Check out this fiddle I made (is in pure JS though): http://jsfiddle.net/56t9c0t4/