# 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.

There is a known bug that affects the positioning of the tooltips, which may be fixed soon.

There are four versions of tool tips:

• the basic tooltip:
the first argument is the clickable part;
the second argument is the tooltip with default math content
\tooltip{#1}{#2}
Example:
\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)

$\displaystyle \sum_{n=0}^\infty {\tooltip{x}{\text{converges for }|x|\lt 1}}^n = \frac{1}{1-x}$
• 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
\tooltipc{#1}{#2}
Example:
\sum_{n=0}^\infty {\tooltipc{x}{\text{converges for }|x|\lt 1 }}^n = \frac{1}{1-x}

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

$\displaystyle \sum_{n=0}^\infty {\tooltipc{x}{\text{converges for }|x|\lt 1}}^n = \frac{1}{1-x}$
• a text tooltip:
the first argument is the clickable part;
the second argument is the tooltip with default text content
\texttip{#1}{#2}
The second argument may contain mathematics, as long as the math is included in the proper delimiters.

Example:
\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)

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

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

yields (hover over each part of the expression below)

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

In this second example, the   \mathbin   causes the texttipped plus sign to be treated as a binary operator, which improves the spacing.
• 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
\texttipc{#1}{#2}
The second argument may contain mathematics, as long as the math is included in the proper delimiters.

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

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

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

Although this capability is not built into MathJax, it is easy to obtain by following the instructions on this page

• 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]
}
}

You need only include the line(s) for the macros you wish to implement.
You may change the color ‘green’ to a desired color.