如何在cytoscape节点上的qtip中使用mathjax

Question

如何在cytoscape节点的qtip中使用Mathjax库？

在下面的示例代码中，单击节点顶部时会显示工具提示，但不会呈现Mathjax。

如何修复此问题，以便公式也显示在工具提示中？@peterkrautzberger在这个答案中的解决方案可能是一种选择，但我没能将其适应这种情况。

编辑：@dipenshah的回答解决了原来的问题。然而，当扩展允许动态Mathjax内容的示例代码时，它似乎不起作用。如果工具提示没有固定的文本，而是从节点定义中的元素txt中获取文本，则不会呈现Mathjax。我已经修改了下面的代码来显示它。

$(function(){
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
ready: function(){
},
elements: {
nodes: [
{ data: { id: '1', name: 'Node 1', txt: '$$\int f(x)dx=\frac{x^2+y}{2x} + C\,.$$' }, },
{ data: { id: '2', name: 'Node 2', txt: '$$\frac{\partial x^2}{dx}\,.$$' }, }
],
edges: [
{ data: { source: '1', target: '2' } }
]
}
});
cy.elements().nodes().qtip({
content: function(){ return this.data('txt') },
position: {
my: 'top center',
at: 'bottom center'
},
style: {
classes: 'qtip-bootstrap',
tip: {
width: 16,
height: 8
}
},
events: {
render: function() {
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
}
}
});
});

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.js"></script>
<script src="https://unpkg.com/cytoscape-qtip@2.7.1/cytoscape-qtip.js"></script>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<h3>Cytoscape qtip demo</h3>
<p>
$$int f(x)dx=frac{x^2+y}{2x} + C,.$$
</p>
<div id="cy" style="width:50%; height:50%; position:absolute;"></div>

Answer 1

基于更新的问题：对于动态内容，无法保证在MathJax开始处理时，dom元素将在同一事件回调中可用，因此我们可以在当前Javascript调用完成处理后使用setTimeout来排队处理：

render: function(event, api) {
var tooltip = api.elements.tooltip;
tooltip.bind('tooltipshow', function(event, api) {
setTimeout(() => MathJax.Hub.Queue(["Typeset", MathJax.Hub]));
});
}

让我们看看：

$(function() {
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
ready: function() {},
elements: {
nodes: [{
data: {
id: '1',
name: 'Node 1',
txt: '$$\int f(x)dx=\frac{x^2+y}{2x} + C\,.$$'
},
},
{
data: {
id: '2',
name: 'Node 2',
txt: '$$\frac{\partial x^2}{dx}\,.$$'
},
}
],
edges: [{
data: {
source: '1',
target: '2'
}
}]
}
});
cy.elements().nodes().qtip({
content: function() {
return this.data('txt');
},
position: {
my: 'top center',
at: 'bottom center'
},
style: {
classes: 'qtip-bootstrap',
tip: {
width: 16,
height: 8
}
},
events: {
render: function(event, api) {
var tooltip = api.elements.tooltip;
tooltip.bind('tooltipshow', function(event, api) {
setTimeout(() => MathJax.Hub.Queue(["Typeset", MathJax.Hub]));
});
}
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/cytoscape-qtip@2.7.1/cytoscape-qtip.js"></script>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<h3>Cytoscape qtip demo</h3>
<p>
$$int f(x)dx=frac{x^2+y}{2x} + C,.$$
</p>
<div id="cy" style="width:50%; height:50%; position:absolute;"></div>

原始答案：

您可以在qtip上使用render回调，让MathJax了解更新：

events: {
render: function() {
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
}
}

结账更新代码：

$(function() {
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
elements: {
nodes: [{
data: {
id: '1',
name: 'Node 1'
},
},
{
data: {
id: '2',
name: 'Node 2'
},
}
],
edges: [{
data: {
source: '1',
target: '2'
}
}]
}
});
var qtip = cy.elements().nodes().qtip({
content: '$$int f(x)dx=frac{x^2+y}{2x} + C,.$$',
position: {
my: 'top center',
at: 'bottom center'
},
style: {
classes: 'qtip-bootstrap',
tip: {
width: 16,
height: 8
}
},
events: {
render: function() {
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
}
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/cytoscape-qtip@2.7.1/cytoscape-qtip.js"></script>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<h3>Cytoscape qtip demo</h3>
<p>
$$int f(x)dx=frac{x^2+y}{2x} + C,.$$
</p>
<div id="cy" style="width:50%; height:50%; position:absolute;"></div>