Tippy size is too big after scrolling
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/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>Solution:
Maybe someone knows the right property to set the max/min width of popper/tippy?
javascript cytoscape.js popper.js tippyjs
asked Nov 21 '18 at 8:03
Stephan T.Stephan T.
9621720
add a comment |
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/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>Solution:
Maybe someone knows the right property to set the max/min width of popper/tippy?
javascript cytoscape.js popper.js tippyjs
asked Nov 21 '18 at 8:03
Stephan T.Stephan T.
9621720
add a comment |
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/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>Solution:
Maybe someone knows the right property to set the max/min width of popper/tippy?
javascript cytoscape.js popper.js tippyjs
asked Nov 21 '18 at 8:03
Stephan T.Stephan T.
9621720
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/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>Solution:
Maybe someone knows the right property to set the max/min width of popper/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>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>javascript cytoscape.js popper.js tippyjs
javascript cytoscape.js popper.js tippyjs
asked Nov 21 '18 at 8:03
Stephan T.Stephan T.
9621720
asked Nov 21 '18 at 8:03
Stephan T.Stephan T.
9621720
asked Nov 21 '18 at 8:03
Stephan T.Stephan T.
9621720
asked Nov 21 '18 at 8:03
Stephan T.Stephan T.
9621720
asked Nov 21 '18 at 8:03
Stephan T.Stephan T.
9621720
9621720
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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.
answered Nov 29 '18 at 17:19
maxkfranzmaxkfranz
8,56011626
The second approach together with the third did the trick, thanks a lot!
– Stephan T.
Nov 29 '18 at 19:57
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53407587%2ftippy-size-is-too-big-after-scrolling%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Nov 29 '18 at 17:19
maxkfranzmaxkfranz
8,56011626
The second approach together with the third did the trick, thanks a lot!
– Stephan T.
Nov 29 '18 at 19:57
add a comment |
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.
answered Nov 29 '18 at 17:19
maxkfranzmaxkfranz
8,56011626
The second approach together with the third did the trick, thanks a lot!
– Stephan T.
Nov 29 '18 at 19:57
add a comment |
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.
answered Nov 29 '18 at 17:19
maxkfranzmaxkfranz
8,56011626
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.
answered Nov 29 '18 at 17:19
maxkfranzmaxkfranz
8,56011626
answered Nov 29 '18 at 17:19
maxkfranzmaxkfranz
8,56011626
answered Nov 29 '18 at 17:19
maxkfranzmaxkfranz
8,56011626
answered Nov 29 '18 at 17:19
maxkfranzmaxkfranz
8,56011626
8,56011626
The second approach together with the third did the trick, thanks a lot!
– Stephan T.
Nov 29 '18 at 19:57
add a comment |
The second approach together with the third did the trick, thanks a lot!
– Stephan T.
Nov 29 '18 at 19:57
The second approach together with the third did the trick, thanks a lot!
– Stephan T.
Nov 29 '18 at 19:57
The second approach together with the third did the trick, thanks a lot!
– Stephan T.
Nov 29 '18 at 19:57
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53407587%2ftippy-size-is-too-big-after-scrolling%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
