Skip to content

Instantly share code, notes, and snippets.

@mauriciopoppe
Last active January 12, 2023 16:29
Show Gist options
  • Save mauriciopoppe/ec311235997fab7b2993 to your computer and use it in GitHub Desktop.
Save mauriciopoppe/ec311235997fab7b2993 to your computer and use it in GitHub Desktop.
MathJax numbered equation equation ref tooltip

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
<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>
.mathjax-tooltip {
display: none;
width: 100%;
position: absolute;
}
/*
* 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);
});
})();
/*
* 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)
})
})()
})
@mauriciopoppe
Copy link
Author

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.

@098tarik
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment