如何在Bootstrap工具提示中使用MathJax? [英] How to use MathJax inside a Bootstrap Tooltip?

问题描述

如何将MathJax库与Bootstrap的工具提示一起使用?我在类似问题上找到了这个答案，但这是行不通的.

How can I use the MathJax library together with Bootstrap's tooltips? I found this answer on a similar question, but this isn't working.

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

推荐答案

实际上有三个问题.

1. 由于工具提示内容位于data属性中，因此一旦将其注入到DOM中，您就需要让MathJax对其进行渲染，请参见. http://docs.mathjax.org/en/latest/advanced/typeset.html .

由于工具提示是异步工作的，因此您需要将代码与其同步，请参阅. http://getbootstrap.com/javascript/#tooltips-events

Since the tooltip works asynchronously, you'll need to synchronize the code with it, cf. http://getbootstrap.com/javascript/#tooltips-events

由于工具提示将根据原始TeX字符串计算位置，因此布局可能会失真； placement:bottom 似乎是唯一真正稳定的位置.

Since the tooltip will calculate placement from the raw TeX string, the layout can get distorted; placement:bottom seems to be the only really stable placement.

您还可以尝试获取工具提示内容，将其呈现在隐藏的元素中，然后将输出放回data属性，但这要涉及得多.

You could also try to grab the tooltip content, render it in a hidden element and put the output back into the data attribute, but that's much more involved.

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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！