Cytoscape-поппер и Tippy: не работает с интерактивным контентом - PullRequest
Новая
       15

Cytoscape-поппер и Tippy: не работает с интерактивным контентом

2 голосов
/ 27 февраля 2020

Я использую cytoscape для отображения связей в биологической литературе и хочу показывать ссылки при щелчке по краям.

Я следую инструкциям по использованию Tippy в сочетании с cytoscape-popper на https://github.com/cytoscape/cytoscape.js-popper/blob/master/demo-tippy.html. Он работает нормально, за исключением случаев, когда создаются ссылки href в тексте Tippy, которые я хотел бы использовать для перехода по клику.

Я пытаюсь сделать это, добавив 'interactive: true' в код ниже , но при этом генерируется консольная ошибка 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'
  });
};

1 Ответ

0 голосов
/ 02 марта 2020

Я не могу воспроизвести вашу ошибку с помощью моего стандартного фрагмента кода. Посмотрите на этот фрагмент кода. При использовании следующего кода ошибка tippy отсутствует, а всплывающая подсказка является интерактивной: 

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>
...