Cytoscape-popper and Tippy: fails with interactive content

Question

I am using cytoscape to display connections in biological literature and want to show references when edges are clicked.

I am following the instructions for using Tippy in conjunction with cytoscape-popper at https://github.com/cytoscape/cytoscape.js-popper/blob/master/demo-tippy.html. It works fine except when creating href links in the Tippy text, which I'd like to be able to use for click-through.

I attempt to do so by incorporating 'interactive: true' in the code below, but doing so generates a console error TypeError: t is null

var makeTippy = function(el, text){
  var ref = el.popperRef();
  var dummyDomEle = document.createElement('div');
  var tip = tippy(dummyDomEle, {
    onCreate: function(instance){ // mandatory
      instance.popperInstance.reference = ref;
    },
    lazy: false,
    trigger: 'manual',
    content: function(){
      var div = document.createElement('div');
      div.innerHTML = text;
      return div;
    },
    // own preferences:
    arrow: true,
    placement: 'bottom',
    hideOnClick: true,
    multiple: true,
    //interactive: true,  <-- uncommenting this line generates error
    sticky: true,
    theme: 'run'
  });
};

score 1 · Answer 1 · answered Aug 05 '20 at 17:31

A way to make it interactive (that works with tippy v5.2.1) is to add the line appendTo: document.body to the tippy options.

For example, in your code:

var makeTippy = function(el, text){
  var ref = el.popperRef();
  var dummyDomEle = document.createElement('div');
  var tip = tippy(dummyDomEle, {
    onCreate: function(instance){ // mandatory
      instance.popperInstance.reference = ref;
    },
    lazy: false,
    trigger: 'manual',
    content: function(){
      var div = document.createElement('div');
      div.innerHTML = text;
      return div;
    },
    // own preferences:
    arrow: true,
    placement: 'bottom',
    hideOnClick: true,
    multiple: true,
    interactive: true,
    appendTo: document.body, //<-- Add This Line
    sticky: true,
    theme: 'run'
  });
};

Relevant lines in the demo: https://github.com/cytoscape/cytoscape.js-popper/blob/master/demo-tippy.html#L123-L124

score 0 · Answer 2 · answered Mar 02 '20 at 06:59

I can't reproduce your Error with my standard tippy snippet. Take a look at this code snippet. With the following code, there is no error with tippy and the tooltip is interactive:

document.addEventListener("DOMContentLoaded", function() {
  var cy = (window.cy = cytoscape({
    container: document.getElementById("cy"),
    style: [{
        selector: "node",
        style: {
          content: "data(id)"
        }
      },
      {
        selector: "edge",
        style: {
          "curve-style": "bezier",
          "target-arrow-shape": "triangle"
        }
      }
    ],
    elements: {
      nodes: [{
        data: {
          id: "a"
        }
      }, {
        data: {
          id: "b"
        }
      }],
      edges: [{
        data: {
          id: "ab",
          source: "a",
          target: "b"
        }
      }]
    },
    layout: {
      name: "grid"
    }
  }));

  var a = cy.getElementById("a");
  var b = cy.getElementById("b");
  var ab = cy.getElementById("ab");

  var makeTippy = function(node, text) {
    var ref = node.popperRef();
    var tip = tippy(ref, {
      content: function() {
        // function can be better for performance
        var div = document.createElement("div");

        div.innerHTML = text;

        return div;
      },

      // your own preferences:
      arrow: true,
      placement: "bottom",
      hideOnClick: false,
      multiple: true,
      sticky: true,
      interactive: true
    });

    return tip;
  };

  var tippyA = makeTippy(a, "foo");

  tippyA.show();

  var tippyB = makeTippy(b, "bar");

  tippyB.show();

  var tippyAB = makeTippy(ab, "baz");

  tippyAB.show();
});

body {
  font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
  font-size: 14px
}

#cy {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}


/* makes sticky faster; disable if you want animated tippies */

.tippy-popper {
  transition: none !important;
}

<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
  <script src="https://unpkg.com/popper.js@1.14.7/dist/umd/popper.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-popper@1.0.4/cytoscape-popper.min.js"></script>
  <script src="https://unpkg.com/tippy.js@4.0.1/umd/index.all.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/tippy.js@4.0.1/index.css" />
</head>

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

Thanks. I replicated and adapted your code. I noticed that you are using tippy v4.0. For information, v5.0 and 6.0 (latest) do not work with 'interactive: true'. — cavallad, Mar 04 '20 at 17:15
Can you use the older version of tippy in your project or is that out of the question? — Stephan T., Mar 05 '20 at 06:09
Yes, I did make it work with tippy v4.0. But this version is no longer supported and I couldn't find documentation. I'm happy with the performance, however. — cavallad, Mar 06 '20 at 09:25

Cytoscape-popper and Tippy: fails with interactive content

2 Answers2