MathJax tooltips

[Chelsea Willis]

This website shows how to use tooltips in MathJax; however, I need to know how to get MathJax to display INSIDE of a tooltip.

I have attached my "studvid.html" document so that you can see I have the MathJax code; you will also see that I am being forced to use .png images instead of MathJax within my tooltips.

I would greatly appreciate your assistance with this problem. Thank you.

Chelsea W.

[Davide P. Cervone]

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

<studvid.html>

[chelsea...@gmail.com]

Thank you. This solution worked.