Question

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

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

Answer 1

实际上有三个问题。

由于工具提示内容在data属性中，因此一旦将MathJax注入DOM，就需要让MathJax呈现它。 http://docs.mathjax.org/en/latest/advanced/typeset.html。
由于工具提示是异步工作的，因此您需要将代码与其同步，参见http://getbootstrap.com/javascript/#tooltips-events
由于工具提示将从原始TeX字符串计算放置，因此布局可能会失真; placement:bottom似乎是唯一非常稳定的展示位置。

您还可以尝试抓取工具提示内容，将其呈现在隐藏元素中并将输出放回数据属性中，但这样做更为复杂。

＆＃13;

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]);
})

});

＆＃13;

<!-- 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>

＆＃13;

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

1 个答案: