Как использовать MathJax внутри всплывающей подсказки Bootstrap?

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

Есть три проблемы, на самом деле.

1. Поскольку содержание подсказки в атрибуте данных, вы должны позволить MathJax сделать его, когда он будет введен в DOM, см http://docs.mathjax.org/en/latest/advanced/typeset.html.

2. Поскольку всплывающая подсказка работает асинхронно, вам необходимо синхронизировать с ней код, ср. http://getbootstrap.com/javascript/#tooltips-events

3. Поскольку всплывающая подсказка рассчитает размещение из исходной строки 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>