Highlight variables in rendered Math on hover

[Kevin Shen]

Hi guys,

I thought it would be really cool to have a feature where a variable is highlighted whenever a user hovers over it. For example if MathJax renders "y=x+2" then when I hover over x with my cursor, a dialogue pops up explaining what x is. Is this possible? I'm thinking there may be a solution where I put each variable (x and y) in a separate div and render them separately with MathJax but rendering variables separately messes up the spacing. Would be great to hear back if anyone has ideas!

[Peter Krautzberger]

Hi,

That's not difficult to achieve. For simple things, maction's tooltips should be sufficient; if you need fancier effects, adding the necessary attributes and hooking into those should work.

An example of what you've tried or want to achieve specifically would be a good way to start.

Regards,

Peter.

On Thu, May 18, 2017 at 7:15 PM, Kevin Shen <kshen...@gmail.com> wrote:

Hi guys,

I thought it would be really cool to have a feature where a variable is highlighted whenever a user hovers over it. For example if MathJax renders "y=x+2" then when I hover over x with my cursor, a dialogue pops up explaining what x is. Is this possible? I'm thinking there may be a solution where I put each variable (x and y) in a separate div and render them separately with MathJax but rendering variables separately messes up the spacing. Would be great to hear back if anyone has ideas!

--
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-users+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Kevin Shen]

Hi Peter,

Thank you for your reply! I've attached 2 pictures of what I'm trying to achieve. I want some text to show up on hover of a variable, the text will detail what that variable is.

For simple things, maction's tooltips should be sufficient

 

What exactly is maction? I didn't find too much on it in Google.

adding the necessary attributes and hooking into those should work

 

Would you have an example laying around? I haven't done anything similar in the past. 

All the best,

Kevin

To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.

[Christophe BAL (via GMAIL)]

Hello.

Can you share your code that is very useful ?

-- 
Christophe BAL
Enseignant Agrégé de Mathématiques
Programmeur Python Amateur

[Davide Cervone]

You might want to read the section on the "action" extension at

http://docs.mathjax.org/en/latest/tex.html#action

This implements tooltips for math subexpressions.  That sounds like what you might want.

Davide

<equation-ui-idea1.PNG><equation-ui-idea2.PNG>

[Christophe Bal]

So simple.  That is great !

Christophe BAL
Enseignant Agrégé de Mathématiques
Programmeur Python Amateur

To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-users+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.
<equation-ui-idea1.PNG><equation-ui-idea2.PNG>

--
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-users+unsubscribe@googlegroups.com.

[Kevin Shen]

Hi Davide,

As far as I can tell, the "action" extension adds a tooltip using a latex command. In my case, I want to deal with the hover in html/javascript. Something like:

var onHoverForce = function() {

  displayDescription();

}

and onHoverForce is called when someone hovers over F (as shown in my example).

The motivation for doing is that I can make the rest of my page respond to hovers over parameters.

Thank you for your time,

Kevin

To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-users+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.
<equation-ui-idea1.PNG><equation-ui-idea2.PNG>

--
You received this message because you are subscribed to a topic in the Google Groups "MathJax Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mathjax-users/qg-qn1qzI04/unsubscribe.
To unsubscribe from this group and all its topics, send an email to mathjax-users+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Kevin T. Shen

B.A.Sc. 2017 | Engineering Physics 

University of British Columbia

Tel. +1.778.323.3634

[Kevin Shen]

I've updated my images to better represent what I want to do. Essentially I want the rest of the page to know that the user has hovered over a variable in the rendered MathJax equation. I'm not sure if this would be possible...

[Peter Krautzberger]

Kevin,

As I wrote initially, maction elements (and the TeX macros that generate them) work for simple things.

If you need something more advanced, especially anything beyond the scope of a single equation, then you'll likely need something outside the scope of MathJax. 

Again, I would start by building something without equations and then talk about how to provide the same hooks in your input.

Best,

Peter.

[Kevin Shen]

Hi Peter,

Thanks for your time. This is an example of what I'm trying to achieve (minus the MathJax). At its simplest, I'm trying to get the javascript to know when the user has hovered over a parameter (I'm using alert here to simplify things). I'm hoping to have more than just a tooltip show up (other parts of the page respond too). I'm not familiar with the limits of what you can do with MathML but essentially what I imagine I'm trying to do is add a "onHover" handler to a <mi> tag, or something equivalent. It would be awesome if I could get this working for 1 equation first, then worry about scaling to all sorts of equations!

Kevin

<equation-ui-idea1.PNG><equation-ui-idea2.PNG>

--
You received this message because you are subscribed to a topic in the Google Groups "MathJax Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mathjax-users/qg-qn1qzI04/unsubscribe.

To unsubscribe from this group and all its topics, send an email to mathjax-user...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Kevin T. Shen

B.A.Sc. 2017 | Engineering Physics 

University of British Columbia

Tel. +1.778.323.3634

--

Kevin T. Shen

B.A.Sc. 2017 | Engineering Physics 

University of British Columbia

Tel. +1.778.323.3634

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.

[Peter Krautzberger]

Hi Kevin,

The main problem (as always) is synchronizing code. 

The nodes you want to attach event handlers to won't appear in the DOM until after MathJax is done (no matter what input).

You could hook into MathJax's internals to detect them but regular mutation observers seem more natural to me. 

A side problem is that MathJax's SVG output won't always expose the full structure of the input, e.g., the nodes that have the class on them;  the addMMLclasses configuration option helps.

I also had a minor issue with mutation observers not detecting SVG subtree nodes but it's easy to work around (and perhaps the workaround should be the default in favor of subtree detection).

Anyway, here's a simple example.

https://codepen.io/pkra/pen/oWVXKN?editors=1111

Best,

Peter.

To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-users+unsubscribe@googlegroups.com.

[Davide Cervone]

There is an alternative to Peter's approach that takes advantage of the fact that if you attach an onmousover handler to an element, you get events for all its children as well, with the event.target set to the child node that triggered the event.  So you could just attach one onmouseover handler to the body, for example, and it could handle ALL the math elements.  Here is an example:

<!DOCTYPE html>

<html>

<head>

<title>MathJax hover handler</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_CHTML"></script>

</head>

<body>

This is math inline \(\class{hover}{x}+\class{hover}{y}=1\) and displayed

\[\class{hover}{x}+\class{hover}{y}\over\class{hover}{1-z^2}\]

<script>

(function () {

  var uncolor;

  function UNCOLOR() {

    if (uncolor) {

      uncolor();

      uncolor = null;

    }

  }

  document.body.onmouseover = function (event) {

    var target = (event || window.event).target;

    while (target && target.isMathJax) {

      if (target.classList.contains('hover')) {

        UNCOLOR();

        if (target.style) {

          target.style.color = target.style.fill = "red";

          uncolor = function () {target.style.color = target.style.fill = ''};

        } else {

          target.setAttribute('mathcolor','red');

          uncolor = function () {target.removeAttribute('mathcolor')};

        }

        return;

      }

      target = target.parentNode;

    }

    UNCOLOR();

  };

  document.body.onmouseout = UNCOLOR;

})()

</script>

</body>

</html>

The hard part is finding out which actual MathJax element is the one you have hovered over.  The while-loop looks for parent elements until one with a class name of "hover" is found (or you pass out of the MathJax expression).  This example just colors the element in red.  It also sets up a function to remove the color when the mouse moves over another element.  This is set up to work with any of the main MathJax output formats (HTML-CSS, CHTML, SVG, and MathML).  The SVG output is not very effective because the characters are paths and only the "ink" is active (not the background), but the other three modes are pretty effective.

Since the event handler is on the body, you will be able to handle all the math, no mater when it is added to the page (no mutation observers needed).  The cost is that the event handler runs when the mouse moves over ANY element, so it will be called a lot.  But it will not go through the while-loop unless it moves over MathJax output, so it should not be that inefficient.  If you want to, you could attach it to containers around each math expression, or some container closer to the math, but that would take a little more work.

In any case, it is an alternative that might be easier to use.

Davide

[Davide Cervone]

In the code I gave previously "target" is the element to be colored.   The lines

        if (target.style) {

          target.style.color = target.style.fill = "red";

          uncolor = function () {target.style.color = target.style.fill = ''};

        } else {

          target.setAttribute('mathcolor','red');

          uncolor = function () {target.removeAttribute('mathcolor')};

        }

do the coloring, and you could use other information about target to determine the color.  Here's an updated version that lets you specify the color to use. There are other ways this could be done, but the best way depends on what you are trying to do.

<html>

<head>

<title>MathJax hover handler</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_CHTML"></script>

<style>

.colored.red {color: red}

.colored.blue {color: blue}

.colored.purple {color:purple}

</style>

</head>

<body>

This is math inline \(\class{hover red}{x}+\class{hover blue}{y}=1\) and displayed

\[\class{hover red}{x}+\class{hover blue}{y}\over\class{hover purple}{1-z^2}\]

<script>

(function () {

  var uncolor;

  function UNCOLOR() {

    if (uncolor) {

      uncolor();

      uncolor = null;

    }

  }

  document.body.onmouseover = function (event) {

    var target = (event || window.event).target;

    while (target && target.isMathJax) {

      if (target.classList.contains('hover')) {

        UNCOLOR();

        target.className += " colored";

        uncolor = function () {target.className = target.className.replace(/ colored/,'')};

        return;

      }

      target = target.parentNode;

    }

    UNCOLOR();

  };

  document.body.onmouseout = UNCOLOR;

})()

</script>

</body>

</html>

Here, note the <style> block in the document head that sets up the colors for the element based on the classes that you have attached to them.

This is no longer a MathJax issue, however, but rather a javascript programming one, and it is unlikely that I will have the time to continue to help with that.

Davide

On Apr 3, 2018, at 12:35 PM, Thiago Brevidelli <thiago.brevi...@gmail.com> wrote:

Davide, is there a way to not only detect the mouseover event, but also know over which element is the mouse? For example, an implementation of your script (the UNCOLOR one) which colors each hover element a different color? Coloring then like this: 

This is math inline \(\class{hover}{x}+\class{hover}{y}=1\) and displayed

\[\class{hover}{x}+\class{hover}{y}\over\class{hover}{1-z^2}\]

Thanks for the attention!