Question

我在Bootstrap Popovers中显示MathJax方程式时遇到了麻烦。

我设法在将弹出窗口插入DOM后渲染Tex方程式。但是这样做的事情是，等式在一瞬间改变了大小，这也将整个弹出窗口向右移动了一点。

除了烦人之外，这显然不是预期的结果。此外，虽然这是有效的＆＃34;罚款＆＃34;在我的笔记本电脑上，在生产环境中运行的相同代码首先显示格式化的等式，但这个＆＃34;尺寸改变的东西＆＃34;让它消失在那里。

以下是代码：

＆＃13;

$('span[data-toggle="popover"]').popover({
  trigger: 'hover',
  placement: 'bottom',
});

$('span').on("inserted.bs.popover", function() {

  var popover = $(this).data("bs.popover");

  if (popover)
    MathJax.Hub.Queue(["Typeset", MathJax.Hub], popover);

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML"></script>

Hover the help icon
<span class="glyphicon glyphicon-question-sign" data-toggle="popover" data-content="$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$"></span>

＆＃13;

Answer 1

此尺寸更改效果是由于fast preview extension是指定的combined configuration file的一部分。

您可以禁用此功能（请参阅下文）。

$('span[data-toggle="popover"]').popover({
  trigger: 'hover',
  placement: 'bottom',
});

$('span').on("inserted.bs.popover", function() {

  var popover = $(this).data("bs.popover");

  if (popover)
    MathJax.Hub.Queue(["Typeset", MathJax.Hub], popover);

});

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  "fast-preview": {
    disabled: true
  }
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML"></script>

Hover the help icon
<span class="glyphicon glyphicon-question-sign" data-toggle="popover" data-content="$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$"></span>

“消失”效果看起来像一个更复杂的问题，因为当MathJax的输出进入和弹出时，容器大小的（不可避免的）变化;它似乎将光标推出检测区域，从而再次移除弹出窗口。

避免这种情况的一种方法是预渲染data-content（服务器端或将其移动到某个不可见元素）并将其替换为（CommonHTML或SVG）输出。

我注意到这似乎并没有完全解决问题，所以这里可能会有一个普遍的弹出问题。

$('span[data-toggle="popover"]').popover({
  trigger: 'hover',
  placement: 'bottom',
});

const popovers = document.querySelectorAll('span[data-toggle="popover"]');
for (let popover of popovers){
  const div = document.createElement('div');
  div.setAttribute('style', 'position: absolute; top: 0, left:0; width:0, height:0, overflow: hidden; visibility: hidden;'); // display:none works as well but then MathJax will just create anothe div with this style
  div.innerHTML = popover.getAttribute('data-content');
  document.body.appendChild(div);
  MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
  MathJax.Hub.Queue(function(){
    popover.setAttribute('data-content', div.querySelector('.mjx-chtml').outerHTML);
  })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML"></script>

Hover the help icon
<span class="glyphicon glyphicon-question-sign" data-toggle="popover" data-html="true" data-content="$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$"></span>

Bootstrap Popover中的MathJax没有正确显示

1 个答案: