MathJax numbered equation equation ref tooltip

_mathjax-equation-numbering.gif

_README.md

MathJax numbered equation preview

No need to click on an a tag to see the equation, just hover on any <a> tag created using \eqref{label} and that's it!

Check https://mauriciopoppe.com/notes/mathematics/calculus/derivative/ for a live demo

Contents:

• index.html (the configuration I use for MathJax which enables equation numbers, see http://cdn.mathjax.org/mathjax/latest/test/sample-eqnum.html for more examples) (MathJaxV2)
• mathjaxPreview.js the scripts which enables the preview (MathJax V2)
• mathjaxPreviewV3.js the same script but with support for MathJax V3

index.html

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    showProcessingMessages: false,
    messageStyle: 'none',
    tex2jax: {
      inlineMath: [['$','$']],
      displayMath: [['$$','$$']],
      processEnvironments: false
    },
    // show equation numbers
    TeX: {
      equationNumbers: {
        autoNumber: "AMS"
      }
    },
    'HTML-CSS': {
      imageFont: null
    }
  });
</script>

mathjaxPreview.css

.mathjax-tooltip {
  display: none;
  width: 100%;
  position: absolute;
}

mathjaxPreview.js

/*
 * MathJax eqn preview for a tags
 *
 * Copyright (c) 2015 Mauricio Poppe
 * Licensed under the MIT license.
 */
(function () {
  var $container = $(document.body);
  var $tooltip = $('<div />').addClass('mathjax-tooltip');
  $container.append($tooltip);

  function onMouseOver(ev) {
    var a = ev.currentTarget;
    var $number = $(a.hash);
    var $root = $number.closest('.MathJax_Display');
    var bounds = $(a).offset();
    var containerBounds = $container.offset();

    $tooltip.stop(true, true);
    $tooltip.append($root.clone());
    $tooltip.css({
      top: bounds.top - containerBounds.top - $tooltip.height() - 5,
      left: -1
    });
    $tooltip.fadeIn();
  }

  function onMouseOut(a) {
    $tooltip.stop(true, true);
    $tooltip.fadeOut(function () {
      $tooltip.empty();
    });
  }

  MathJax.Hub.Queue(function () {
    $container.on('mouseover', 'a[href*="mjx-eqn-"]', onMouseOver);
    $container.on('mouseout', 'a[href*="mjx-eqn-"]', onMouseOut);
  });

})();

mathjaxPreviewV3.js

/*
 * MathJax 3 equation preview, works with MathJax V3
 *
 * Copyright (c) 2020 Mauricio Poppe
 * Licensed under the MIT license.
 */
var container = document.body

var tooltip = document.createElement('div')
tooltip.classList.add('mathjax-tooltip')
Object.assign(tooltip.style, {
  display: 'none',
  width: '100%',
  position: 'absolute'
})
container.appendChild(tooltip)

function getTarget(ev) {
  return ev.currentTarget.closest('a')
}

function onMouseOver(ev) {
  var href = getTarget(ev)
  if (!href) return
  var number = document.querySelector(href.hash)
  var equation = number.closest('.MathJax')

  var equationBounds = equation.getBoundingClientRect()
  Object.assign(tooltip.style, {
    top: href.closest('.MathJax').offsetTop - equationBounds.height - 50 + 'px',
    display: 'block'
  })

  tooltip.appendChild(equation.cloneNode(true))
}

function onMouseOut(ev) {
  var href = getTarget(ev)
  if (!href) return
  tooltip.innerHTML = ''
  Object.assign(tooltip.style, { display: 'none' })
}

document.addEventListener('DOMContentLoaded', function () {
  ;(async function afterMathJaxRender() {
    await MathJax.startup.promise
    Array.from(document.querySelectorAll('.MathJax_ref')).forEach((el) => {
      el.addEventListener('mouseover', onMouseOver)
      el.addEventListener('mouseout', onMouseOut)
    })
  })()
})

The flickering was a styling issue, I fixed it by moving the cloned formula a little bit above the link with

  Object.assign(tooltip.style, {
    top: href.closest('.MathJax').offsetTop - equationBounds.height - 50 + 'px',
    display: 'block'
  })

For positioning it depends where your cloned element is with respect to the original one, if it's a sibling and the cloned element comes after the original then it'll be on top without any z-style fixes, I used var container = document.body as the container element but it could be a sibling too.

I am not exactly sure what you mean by a little bit above the link. I have the exact same formula and it is still flickering.

Should I just change the container to be a sibling then?