Using tooltips

86 views
Skip to first unread message

Andrew Murdza

unread,
Jun 14, 2022, 11:06:49 AM6/14/22
to MathJax Users
I want to use tooltips in my MathJax equations. I found this website (https://www.onemathematicalcat.org/MathJaxDocumentation/toolTips.htm). I tried to copy the document's contents. My head looks like this:

<head>
    <script src="https://www.w3schools.com/lib/w3.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        MathJax = {
            tex: {
                inlineMath: [['$', '$'], ['\\(', '\\)']],
                Macros: {
                    tooltipc: ["\\tooltip{\\color{green}{#1}}{#2}", 2],
                    texttip: ["\\tooltip{#1}{\\text{#2}}", 2],
                    texttipc: ["\\tooltip{\\color{green}{#1}}{\\text{#2}}", 2]
                }
            }
        };
        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 }));
                }
            });
        });
    </script>
    <script type="text/javascript" id="MathJax-script" async
        </script>
    <link rel="stylesheet" href="style.css">
    \(\newcommand{\r}[1]{\frac{1}{#1}}\)
    \(\newcommand{\h}[1]{\frac{#1}{2}}\)
    \(\newcommand{\R}{\mathbb{R}}\)
    \(\renewcommand{\a}[1]{\left\vert #1 \right\vert}\)
    \(\newcommand{\p}[1]{\left( #1 \right)}\)
    \(\newcommand{\iff}{\Longleftrightarrow}\)
    \(\definecolor{orange}{RGB}{253, 119, 0}\)
    \(\definecolor{redd}{RGB}{232,9,0}\)
    \(\definecolor{bluee}{RGB}{0,77,255}\)
    \(\definecolor{purplee}{RGB}{152,102,255}\)
    \(\definecolor{goldd}{RGB}{204, 153, 0}\)
    \(\definecolor{pinkk}{RGB}{244, 136, 189}\)
    \(\definecolor{lightbluee}{RGB}{0, 176, 240}\)
    \(\definecolor{greenn}{RGB}{114, 221, 0}\)
    \(\newcommand{\blue}[1]{\textcolor{bluee}{#1}}\)
    \(\newcommand{\red}[1]{\textcolor{redd}{#1}}\)
    \(\newcommand{\purple}[1]{\textcolor{purplee}{#1}}\)
    \(\newcommand{\gold}[1]{\textcolor{goldd}{#1}}\)
    \(\newcommand{\pink}[1]{\textcolor{pinkk}{#1}}\)
    \(\newcommand{\lightblue}[1]{\textcolor{lightbluee}{#1}}\)
    \(\newcommand{\green}[1]{\textcolor{greenn}{#1}}\)
    \(\newcommand{\orange}[1]{\textcolor{orange}{#1}}\)
    \(\newcommand{\brown}[1]{\textcolor{darkorchid}{#1}}\)
    \(\newcommand{\grey}[1]{\textcolor{grey}{#1}}\)
    \(\newcommand{\magenta}[1]{\textcolor{magenta}{#1}}\)
    \(\newcommand{\white}[1]{\textcolor{white}{#1}}\)
    \(\newcommand{\yellow}[1]{\textcolor{yellow}{#1}}\)
    \(\newcommand{\rt}{\textcolor{red}{t}}\)
    \(\newcommand{\frac} [2]{\genfrac{} {} {2} {0} {#1}{#2}}\)
    \(\newcommand{\beq}{\mathrel{\vcenter{\rlap{\Rule{2ex}{3px}{0px}}\raise9px{\Rule{2ex}{3px}{0px}}}}}\)
    \(\newcommand{\bm}{\mathrel{\vcenter{\Rule{1.5ex}{2px}{0px}}}}\)
    \(\newcommand{\bp}{\boldsymbol{+}}\)
</head>

I believe that the issue is that I am using MathJax.Hub.Register.StartupHook and "Macros" in the wrong place. It would be awesome if someone could help me put them in the correct location so I can use tooltips.

Andrew Murdza

unread,
Jun 14, 2022, 11:08:43 AM6/14/22
to MathJax Users
I forgot to mention that

\tooltip{\text{change in }y}}{hi} is how I used tooltip and the problem is that it doesn't recognize "tooltip" as a command.

Davide Cervone

unread,
Jun 17, 2022, 9:49:34 AM6/17/22
to mathja...@googlegroups.com
You are mixing MathJax v2 and v3 configuration options (and you should be seeing error messages in the browser console indicating that there are errors with your configuration).  Note that www.onemathematicalcat.org uses MathJax version 2, and I don't think it has been updated to version 3.

Both v2 and v3 now include built-in support for tool tips (via the action extension), so you don't need to define them yourself, as you are trying to do.  In v3, the action extension is auto-loaded, so you don't have to do anything special in your configuration to use it.  There are two macros for tooltips:  \mathtip{math}{tip} and \texttip{math}{tip}.  For the first, the tip is mathematics (like in your example), and in \texttip, the tip is simple text (no math allowed).  So 

\mathtip{hi}{\text{change in }y}}

would be what you wanted to use for your example.

You also are defining the macros incorrectly.  In v3, you need to use macros: not Macros: for the block of macros.  You also seem to have macros at text in the header section of the HTML file, which is not valid (and I don't think it will work in v3).  It is better to put those in the macros section of your tex configuration block.  For example, your  

\(\newcommand{\r}[1]{\frac{1}{#1}}\)
\(\newcommand{\h}[1]{\frac{#1}{2}}\)
.
.
.

would be better as

MathJax = {
  tex: {
    macros: {
      r: ['\\frac{1}{#1}', 1],
      h: ['\\frac{#1}{2}', 1],
      .
      .
      .
    }
  }
}

Hope that helps.

Davide



--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/61149948-efc9-43ce-a16b-4cc9a644b214n%40googlegroups.com.

Andrew Murdza

unread,
Jun 17, 2022, 10:25:09 PM6/17/22
to MathJax Users
Hey Davide,

Thanks for replying! Yeah I've realized that I need to work with version 3. I also found this extremely helpful link with a lot of information about MathJax 3

chrome-extension://efaidnbmnnnibpcajpcglclefindmkaj/https://buildmedia.readthedocs.org/media/pdf/mathjax/latest/mathjax.pdf

It turns out that "\newcommand" does work in version 3 but it results in a lot of ugly text that appears for about a second before disappearing. I was actually going to ask about macros in a future question because I knew they were better but was having issues getting them to work.

Is there a way to do \(\definecolor{orange}{RGB}{253, 119, 0}\) in the configuration instead of in the header? I also have another question that I will ask in a new thread.

Davide Cervone

unread,
Jun 23, 2022, 2:26:30 PM6/23/22
to mathja...@googlegroups.com
Is there a way to do \(\definecolor{orange}{RGB}{253, 119, 0}\) in the configuration instead of in the header?

You can use a configuration like the following:

MathJax = {
  loader: {load: ['[tex]/color']},
  tex: {packages: {'[+]': ['color']}},
  startup: {
    ready() {
      MathJax.startup.defaultReady();
      MathJax.tex2mml(String.raw`
        \definecolor{orange}{RGB}{253, 119, 0}
        \definecolor{redd}{RGB}{232,9,0}
        \definecolor{bluee}{RGB}{0,77,255}
        \definecolor{purplee}{RGB}{152,102,255}
        \definecolor{goldd}{RGB}{204, 153, 0}
        \definecolor{pinkk}{RGB}{244, 136, 189}
        \definecolor{lightbluee}{RGB}{0, 176, 240}
        \definecolor{greenn}{RGB}{114, 221, 0}
      `);
    }
  }
};

to perform definitions prior to MathJax typesetting the page.

Davide

Davide Cervone

unread,
Jun 23, 2022, 2:40:49 PM6/23/22
to mathja...@googlegroups.com
I also found this extremely helpful link with a lot of information about MathJax 3

Yes, that is the print version of the main MathJax v3 documentation whose web version is at


You can get other versions and other formats (PDF, HTML, EPUB) via the small green menu at the bottom of the sidebar on the left.

Davide

Reply all
Reply to author
Forward
0 new messages