我目前在做什么：
我有一个包含可变数量节点的图表。
在 10 和最大之间。30 个节点（我们称之为 n）
我使用的布局是 dagre 布局（并不重要），并且根据数据，在 1 到 n 之间。代码工作正常，我可以显示我想要的所有数据。此外，我的小费有更多的文字，只有foo和bar：
- 权限类型 | 权限名称 | 继承自
- 身份 | 编辑身份信息 | 某物
问题：
由于 cytoscape.js 的缩放功能，可以操纵视口（我的任务需要该功能）。
当我放大和缩小时会发生什么，看起来并不那么漂亮：
- Tippy 的尺寸从超小到太大，几乎没有缩放
- 如果图表足够大，节点通常在这些小费的后面，有时甚至缩放 1（这是默认值）
- 将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'
}
},
{
data: {
id: 'c'
}
},
{
data: {
id: 'd'
}
},
{
data: {
id: 'e'
}
},
{
data: {
id: 'f'
}
},
{
data: {
id: 'g'
}
},
{
data: {
id: 'h'
}
},
{
data: {
id: 'i'
}
},
{
data: {
id: 'j'
}
},
{
data: {
id: 'k'
}
},
{
data: {
id: 'l'
}
},
{
data: {
id: 'm'
}
},
{
data: {
id: 'n'
}
},
{
data: {
id: 'o'
}
},
{
data: {
id: 'p'
}
},
{
data: {
id: 'q'
}
},
{
data: {
id: 'r'
}
},
{
data: {
id: 's'
}
},
{
data: {
id: 't'
}
},
{
data: {
id: 'u'
}
},
{
data: {
id: 'v'
}
},
{
data: {
id: 'w'
}
},
{
data: {
id: 'x'
}
},
{
data: {
id: 'y'
}
},
{
data: {
id: 'z'
}
}
],
edges: [{
data: {
source: 'a',
target: 'b'
}
},
{
data: {
source: 'a',
target: 'c'
}
},
{
data: {
source: 'a',
target: 'd'
}
},
{
data: {
source: 'a',
target: 'e'
}
},
{
data: {
source: 'a',
target: 'f'
}
},
{
data: {
source: 'b',
target: 'g'
}
},
{
data: {
source: 'b',
target: 'h'
}
},
{
data: {
source: 'b',
target: 'i'
}
},
{
data: {
source: 'b',
target: 'j'
}
},
{
data: {
source: 'b',
target: 'k'
}
},
{
data: {
source: 'b',
target: 'l'
}
}
]
},
layout: {
name: 'grid'
}
});
var a = cy.getElementById('a');
var b = cy.getElementById('b');
var makeTippy = function(node, text) {
return tippy(node.popperRef(), {
html: (function() {
var div = document.createElement('div');
div.innerHTML = text;
return div;
})(),
trigger: 'manual',
arrow: true,
placement: 'bottom',
hideOnClick: false,
multiple: true,
sticky: true
}).tooltips[0];
};
var tippyA = makeTippy(a, 'foo');
tippyA.show();
var tippyB = makeTippy(b, 'bar');
tippyB.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;
}
h1 {
opacity: 0.5;
font-size: 1em;
font-weight: bold;
}
/* makes sticky faster; disable if you want animated tippies */
.tippy-popper {
transition: none !important;
}<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"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-popper@1.0.2/cytoscape-popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@2.0.9/dist/tippy.all.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tippy.js@2.0.9/dist/tippy.css" />
</head>
<body>
<h1>cytoscape-popper tippy demo</h1>
<div id="cy"></div>
</body>
</html>解决方案：
也许有人知道设置 popper/tippy 的最大/最小宽度的正确属性？