How to use MathJax inside a Bootstrap Tooltip?

Question

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>

Answer 1

There are three problems, actually.

1. Since the tooltip content is in the data attribute, you need to let MathJax render it once it is injected into the DOM, cf. http://docs.mathjax.org/en/latest/advanced/typeset.html.

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

3. 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.

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>