Cytoscape-popper et Tippy : des échecs avec du contenu interactif

Question

J'utilise cytoscape pour afficher les connexions dans la littérature biologique et je veux montrer les références lorsque l'on clique sur les bords.

Je suis les instructions pour utiliser Tippy en conjonction avec cytoscape-popper à l'adresse suivante https://github.com/cytoscape/cytoscape.js-popper/blob/master/demo-tippy.html . Cela fonctionne bien, sauf lorsqu'il s'agit de créer des liens href dans le texte de Tippy, que j'aimerais pouvoir utiliser pour les clics.

J'essaie de le faire en incorporant 'interactive : true' dans le code ci-dessous, mais cela génère une erreur dans la console. 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'
  });
};

Answer 1

Une façon de le rendre interactif (qui fonctionne avec tippy v5.2.1) est d'ajouter la ligne appendTo: document.body jusqu'aux options de basculement.

Par exemple, dans votre 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'
  });
};

Lignes pertinentes dans la démo : https://github.com/cytoscape/cytoscape.js-popper/blob/master/demo-tippy.html#L123-L124

Answer 2

Je ne peux pas reproduire votre erreur avec mon snippet standard. Jetez un coup d'oeil à ce bout de code. Avec le code suivant, il n'y a pas d'erreur avec tippy et l'infobulle est 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>