1

我在这个 codepen 中设置了它：我有两个与使用 Tippy v4 的解决方案相关的问题。相关的stackoverflow问题

JS：

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"
}
}));

function makePopper(ele) {
let ref = ele.popperRef();
tippy(ref, {
  // popperInstance will be available onCreate
  lazy: false,
  onCreate(instance) {
    instance.popperInstance.reference = {
      clientWidth: 10,
      clientHeight: 10,
      getBoundingClientRect() {
        return {
          w: 20, h:20
        };
      },
    };
  },
});
}
cy.ready(function() {
cy.elements().forEach(function(ele) {
  makePopper(ele);
});
});

cy.elements().unbind('mouseover');
cy.elements().bind('mouseover', (event) => event.target.tippy.show());

cy.elements().unbind('mouseout');
cy.elements().bind('mouseout', (event) => event.target.tippy.hide());

});

HTML：

<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.5/cytoscape-popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"> 
</script>
<link rel="stylesheet" 
href="https://unpkg.com/tippy.js@5/dist/backdrop.css">  

</head>

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

CSS：

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;
}

h1 {
opacity: 0.5;
font-size: 1em;
font-weight: bold;
}

1) 是否可以让 Tippy 在拖动时跟随节点？我尝试在 cy.ready(), tippy.setDefaultProps({followCursor: 'true'}); 中添加这样的属性 但我得到一个错误，tippy.setDefaultProps() 不是一个函数。我已经在这个 codepen 中设置了这个 Tippy v4 问题： setDefaultProps codePen 

tippy.setDefaultProps({followCursor: 'true'});

2) 我无法让tippy 示例与Tippy v5 一起使用。我收到一个错误，tippy 作为不再支持的普通对象传递。我试过传递一个 ref 对象，但我得到了同样的错误。我在这个codepen中设置了v5： Tippy v5错误 上面显示的代码是Tippy v5代码，但Tippy v4代码非常相似。

4

0 回答 0