What I currently do:
I have a graph with a variable amount of nodes.
between 10 and max. 30 nodes (lets call this n)
The layout I use is the dagre layout (not that it matters) and, depending on the data, between 1 and n tippy's. The code works fine and I can display all the data I want. Also, my tippy's have more text that just foo and bar :
- Permission type | Permission name | Inherited from
- Identity | Edit identity information | something
The problem:
Due to the zooming feature of cytoscape.js, the viewport can be manipulated (and I need that feature for my task).
What happens, when I zoom in and out, doesn't look that pretty:
- the tippy's sizes go from super small to way too big with very little zooming
- if the graph is big enough, the nodes are often behind these tippy's, sometimes even with zoom 1 (this is the default value)
- changing the tippy's size to 'small' didn't change much for me
Example:
The example is not as extreme as some of my use cases, but you can see where the problem comes from.
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/[email protected]/cytoscape-popper.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/tippy.all.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tippy.css" />
</head>
<body>
<h1>cytoscape-popper tippy demo</h1>
<div id="cy"></div>
</body>
</html>Solution:
Maybe someone knows the right property to set the max/min width of popper/tippy?
There are several things you can do to control overall tippy size, from least to most significant:
Controlling the decoration around your tippy content: Modify or override the stylesheet that comes with tippy. This specifies things like the border, background colour, triangle size.
Controlling the size of your content: Put your tippy content (
html) as a div with a class (e.g.<div class="my-tippy-content">content goes here</div>. You can then use your app's CSS to control the size of the content (max-width, font-size, etc.).Controlling when the tippy is visible: If you have many tippies active at once, it may just not be practical to display them in certain cases (e.g. when zoomed out). In those cases, it may make sense to automatically hide tippies.
There are probably other approaches, but these are the main ones I've used.