The problem is with your CSS, which is interfering with MathJax's positioning of the mathematics. If you change your declarations from
.tooltip span { ... }
and
.tooltip:hover span { ... }
to
.tooltip > span { ... }
and
.tooltip:hover > span { ... }
that should clear things up. You can then use MathJax as usual within the <span> tags in your tooltips. The original form would affect ALL spans inside your tooltip (including all the ones generated by MathJax), and that messed up the spacing of the mathematics (it was moved 2em down and 1em over, which put it outside its clipping box, so it disappeared). The greater-than sign makes your changes only affect the first span inside the tooltip, so that the changes don't affect the MathJax output.
Davide