How to: MathJax in a JQueryUI ToolTip

Source: http://www.nowherenearithaca.com/2014/01/using-mathjax-in-jquery-tooltip-one-way.html

• 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');
                }
            });
    });