如何在 Bootstrap 工具提示中使用 MathJax？

Question

如何将 MathJax 库与 Bootstrap 的工具提示一起使用？我在类似的问题上发现了这个 answer，但这不起作用。

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>


<br>
<br>
<br>
<a href="#" data-toggle="tooltip" title="$$\frac{x*sin(y)}{23}$$
">Hover over me</a>
<br>
$$\frac{x*sin(y)}{23}$$
<br>
<br>
<br>
<a href="#" data-toggle="tooltip" data-html="true" title="$$\frac{x*sin(y)}{23}$$
">Hover over me</a>

Answer 1

实际上是三个问题

由于tooltip的内容在data属性中，注入到DOM后需要让MathJax渲染出来，cf. http://docs.mathjax.org/en/latest/advanced/typeset.html。
由于工具提示是异步工作的，因此您需要将代码与其同步，参见。 http://getbootstrap.com/javascript/#tooltips-events
由于工具提示将从原始 TeX 字符串计算位置，布局可能会变形； placement:bottom 似乎是唯一真正稳定的位置。

您也可以尝试获取工具提示内容，将其呈现在隐藏元素中，然后将输出放回数据属性中，但这要复杂得多。

var popOverSettings = {
    placement: 'bottom',
}

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip(popOverSettings);
  $('[data-toggle="tooltip"]').on('shown.bs.tooltip', function () {
  MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
})

});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.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>


<br>
<br>
<br>
<a href="#" data-toggle="tooltip" title="$$\frac{x*\sin(y)}{23}$$
">Hover over me</a>
<br>
$$\frac{x*\sin(y)}{23}$$
<br>
<br>
<br>
<a href="#" data-toggle="tooltip" data-html="true" title="$$\frac{x*\sin(y)}{23}$$
">Hover over me</a>

如何在 Bootstrap 工具提示中使用 MathJax？

How to use MathJax inside a Bootstrap Tooltip?

mathjax

twitter-bootstrap