Tooltips in MathJax

This page is a summary, expansion, and working example of the topic ‘Labeling equation terms’ from the MathJax Users Group in April 2011. It includes solutions that were contributed by Davide P. Cervone.

This page is being processed with MathJax 2.7.1, loaded from my own server. There is custom MathJax configuration code in the head of this document, which is discussed below.

Note: Davide Cervone talks about tooltips in newer versions of MathJax at this page.

There are four versions of tool tips:

1. The Basic Tooltip

The first argument is the clickable part; the second argument is the tooltip with default math content.

Example of the Basic Tooltip

\sum_{n=0}^\infty {\tooltip{x}{\text{converges for }|x|\lt 1 }}^n = \frac{1}{1-x}

yields (hover over the ‘$x$’ in the expression $\,x^n\,$ below):

2. The Basic Tooltip with Color

The first argument is the clickable part, identified by a chosen color; the second argument is the tooltip with default math content.

Note: The color green is specified in the custom MathJax configuration code in the head of this document.

Example of the Basic Tooltip with Color

\sum_{n=0}^\infty {\tooltipc{x}{\text{converges for }|x|\lt 1 }}^n = \frac{1}{1-x}

yields (hover over the green ‘$x$’ below):

3. A Text Tooltip

The first argument is the clickable part; the second argument is the tooltip with default text content.

The second argument may contain mathematics, as long as the math is included in the proper delimiters.

Example of a Text Tooltip

\texttip{a}{the first term is an \$a\$)} \texttip{+}{a binary operator} \texttip{b}{the second term}

yields (hover over each part of the expression below):

4. A Text Tooltip with Color

The first argument is the clickable part, identified by a chosen color; the second argument is the tooltip with default text content.

The second argument may contain mathematics, as long as the math is included in the proper delimiters.

Example of a Text Tooltip with Color

\frac{\texttipc{a+b}{numerator}}{\texttipc{2}{denominator}}

yields (hover over each green part of the expression below):

Although this capability is not built into MathJax [2.7.1], it is easy to obtain by following the instructions on this page (and using the source code of this page as an example).

STEP 1: Include the following in the configuration section of your document. (View the source code of this page to see this in action.)

MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {
  var TEX = MathJax.InputJax.TeX,
    MML = MathJax.ElementJax.mml;
  TEX.Definitions.macros.tooltip = "myToolTip";
  TEX.Parse.Augment({
    myToolTip: function (name) {
      var arg = this.ParseArg(name), tip = this.ParseArg(name);
      this.Push(MML.maction(arg,tip).With({actiontype: MML.ACTIONTYPE.TOOLTIP}));
    }
  });
});  

STEP 2: Include the following in MathJax.Hub.Config. (Again, view the source code of this page to see this in action.)

TeX: {
  Macros: { 
    tooltipc: ["\\tooltip{\\color{green}{#1}}{#2}",2],
    texttip: ["\\tooltip{#1}{\\text{#2}}",2],
    texttipc: ["\\tooltip{\\color{green}{#1}}{\\text{#2}}",2]
  }
}