Bootstrap 弹出窗口中的 MathJax 未正确显示

Question

我在 Bootstrap 弹出窗口中显示 MathJax 方程时遇到问题。

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

除了烦人之外，这显然不是预期的结果。此外，虽然这在我的笔记本电脑上有效 "fine"，但生产环境中的相同代码运行首先会显示格式化的方程式，但是 "size changing thing" 会使它在那里消失。

这是代码：

$('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 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>

Answer 1

这种尺寸变化效果是由于指定的 fast preview extension that is part of the 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>

"disappearing" 效果看起来像一个更复杂的问题，因为当 MathJax 的输出出现时容器大小发生（不可避免的）变化并且 pop-over;似乎这会将光标推出检测区域，从而再次删除弹出窗口。

避免这种情况的一种方法是 pre-render data-content（server-side 或将其移动到某处的不可见元素）并将其替换为（CommonHTML 或 SVG）输出.

我注意到这似乎并不能完全解决问题，所以这里可能存在一般性 pop-over 问题。

$('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 弹出窗口中的 MathJax 未正确显示

MathJax in Bootstrap Popover doesn't show up properly

javascript

jquery

html

mathjax

bootstrap-popover