# 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
(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]
}
}

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