Using MathJax in a JQueryUI ToolTip - One Way that Works

One of the most beautiful equations:$$e^{\pi i} + 1 = 0$$

I recently became aware of the very cool MathJax library for mathematics typesetting on the web. Based on Donald Knuth's TeX, the equations it renders are beautiful. And to top it off, they can be standard html/svg/css, which opens up all kinds of possibilities for their use with interactivity.

For the project I was working on that exposed me to MathJax, I had some jquery tooltips that had an odd tiny equation or two, but I did not try to use MathJax for them, partly because it was not immediately clear how to work this out with the way the tooltips and MathJax both work. However, it turns out that it is relatively easy to incorporate equations generated by MathJax into jquery tooltips.

There may be a more straightforward way to do this, but it works.

You can see for yourself by moving your mouse over this text, as a tooltip with an equation should show up when you do (assuming that the relevant libraries can be loaded from the cdns).

Main Implementation Steps
  • Make sure and include a reference to the jquery, jqueryui (and jqueryui css), and MathJax libraries
  • For the text with equations that is to be displayed in a tooltip somewhere, put it in a hidden div that can be accessed later by its css id (this will be found and rendered by the MathJax library)
  • Include the following code below in the jquery $(document).ready method (here mainStuff is the id of the overarching div/html element that contains everything). The first bit sets up a callback for when Mathjax is done rendering all of the equations it could find. The second part is a way to get raw html put into the tooltip itself (putting html into the "title" attribute of an element does not seem to work).
  • //Set up a callback to hear back when MathJax is done rendering the equations
    //  it finds
    $("#mainStuff").load(
                   '@Url.Action("ActionResultMethod","ControllerName",{controller parameters})', 
                   function () {
                      MathJax.Hub.Queue(
                      ["Typeset",MathJax.Hub,"mainStuff"],
                          function () {                
                          $("#thingToHaveMathJaxToolTip").attr("title",$("#toolTipText").html());
                    
                  }
                );
              });          
    
    //set things up so that we can shove raw html into what is shown in the tooltip; 
    //  in this case, we will have already put into the title attribute the html that 
    //  contains the MathJax rendered equations (via what we do in the callback).
    $(function () {
      $(document).tooltip({
                content: function () {
                return $(this).prop('title');
                }
            });
    });
    
    
    This goes in your jQuery $(document).ready callback

If this doesn't work for you, please let me know... and of course let me know if you come up with a more straightforward way to do it.

Popular Posts