javascript - Bootstrap Popover 中的 MathJax 没有正确显示

Question

我在 Bootstrap Popovers 中显示 MathJax 方程时遇到问题。

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

除了烦人之外，这显然不是预期的结果。此外，虽然这在我的笔记本电脑上运行良好，但在生产环境中运行的相同代码首先会显示格式化的方程式，但这种“大小变化的东西”使它在那里消失。

代码如下:

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