MathJax in Bootstrap Popover doesn't show up properly

Question

I'm having trouble showing MathJax equations in Bootstrap Popovers.

I managed to render the Tex equation after the popover is inserted in the DOM. But it does this thing where the equation changes size after a split second, which also shifts the whole popover to the right a little.

Aside from being annoying, this is clearly not the expected result. Also, while this works "fine" on my laptop, the same code running in a production environment shows the formatted equation at first, but this "size changing thing" makes it disappear there.

Here is the code :

$('span[data-toggle="popover"]').popover({
  trigger: 'hover',
  placement: 'bottom',
});

$('span').on("inserted.bs.popover", function() {

  var popover = $(this).data("bs.popover");

  if (popover)
    MathJax.Hub.Queue(["Typeset", MathJax.Hub], popover);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML"></script>

Hover the help icon
<span class="glyphicon glyphicon-question-sign" data-toggle="popover" data-content="$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$"></span>

score 2 · Accepted Answer · answered Apr 06 '18 at 07:29

This size changing effect is due to the fast preview extension that is part of the combined configuration file that was specified.

You can disabled this (see below).

$('span[data-toggle="popover"]').popover({
  trigger: 'hover',
  placement: 'bottom',
});

$('span').on("inserted.bs.popover", function() {

  var popover = $(this).data("bs.popover");

  if (popover)
    MathJax.Hub.Queue(["Typeset", MathJax.Hub], popover);

});

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  "fast-preview": {
    disabled: true
  }
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML"></script>

Hover the help icon
<span class="glyphicon glyphicon-question-sign" data-toggle="popover" data-content="$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$"></span>

The "disappearing" effect looks like a more complicated issue due to the (inenvitable) change in container size when MathJax's output comes in and the pop-over; it seems this pushes the cursor out of the detection zone, thus removing the popover again.

One way to avoid this is to pre-render the data-content (either server-side or moving it to an invisible element somewhere) and replacing it with the (CommonHTML or SVG) output.

I've noticed that this does not seem to solve the problem entirely though so there might be a general pop-over issue here.

$('span[data-toggle="popover"]').popover({
  trigger: 'hover',
  placement: 'bottom',
});

const popovers = document.querySelectorAll('span[data-toggle="popover"]');
for (let popover of popovers){
  const div = document.createElement('div');
  div.setAttribute('style', 'position: absolute; top: 0, left:0; width:0, height:0, overflow: hidden; visibility: hidden;'); // display:none works as well but then MathJax will just create anothe div with this style
  div.innerHTML = popover.getAttribute('data-content');
  document.body.appendChild(div);
  MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
  MathJax.Hub.Queue(function(){
    popover.setAttribute('data-content', div.querySelector('.mjx-chtml').outerHTML);
  })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML"></script>

Hover the help icon
<span class="glyphicon glyphicon-question-sign" data-toggle="popover" data-html="true" data-content="$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$"></span>

MathJax in Bootstrap Popover doesn't show up properly

1 Answers1