@@ -267,10 +267,10 @@ exports.loneHover = function loneHover(hoverItems, opts) {
             fixVerticalOverlap();
             alignHoverText(hoverLabel, rotateLabels, scaleX, scaleY);
 
-            hoverLabel.each(function () {
+            hoverLabel.each(function (d) {
                 var g = d3.select(this);
-                svgTextUtils.repositionMathGroup(g.select('text.nums'));
-                svgTextUtils.repositionMathGroup(g.select('text.name'));
+                svgTextUtils.repositionMathGroup(g.select('text.nums'), d.numsMathSize);
+                svgTextUtils.repositionMathGroup(g.select('text.name'), d.nameMathSize);
             });
         });
     }
@@ -1053,10 +1053,10 @@ function _hover(gd, evt, subplot, noHoverEvent, eventTarget) {
                 hoverAvoidOverlaps(hoverLabels, rotateLabels, fullLayout, hoverText.commonLabelBoundingBox);
                 alignHoverText(hoverLabels, rotateLabels, fullLayout._invScaleX, fullLayout._invScaleY);
 
-                hoverLabels.each(function () {
+                hoverLabels.each(function (d) {
                     var g = d3.select(this);
-                    svgTextUtils.repositionMathGroup(g.select('text.nums'));
-                    svgTextUtils.repositionMathGroup(g.select('text.name'));
+                    svgTextUtils.repositionMathGroup(g.select('text.nums'), d.numsMathSize);
+                    svgTextUtils.repositionMathGroup(g.select('text.name'), d.nameMathSize);
                 });
             });
         }
@@ -1103,7 +1103,7 @@ function hoverDataKey(d) {
 var EXTRA_STRING_REGEX = /<extra>([\s\S]*)<\/extra>/;
 
 function getHoverTextBBox(gd, textSel) {
-    return getBoundingClientRect(gd, svgTextUtils.getMathOrTextNode(textSel));
+    return toLayoutRect(gd, svgTextUtils.getTextClientRect(textSel));
 }
 
 function createHoverText(hoverData, opts) {
@@ -1220,6 +1220,7 @@ function createHoverText(hoverData, opts) {
         });
 
         var commonLabelTex = svgTextUtils.isPureTex(String(t0));
+        var commonMathSize;
         var onCommonLabelReady;
 
         if (commonLabelTex) {
@@ -1231,7 +1232,7 @@ function createHoverText(hoverData, opts) {
                             return;
                         }
                         positionCommonLabel();
-                        svgTextUtils.repositionMathGroup(ltext);
+                        svgTextUtils.repositionMathGroup(ltext, commonMathSize);
                         resolve();
                     };
                 })
@@ -1250,7 +1251,7 @@ function createHoverText(hoverData, opts) {
         function positionCommonLabel() {
             label.attr('transform', '');
             svgTextUtils.positionText(ltext, 0, 0);
-            svgTextUtils.repositionMathGroup(ltext);
+            commonMathSize = svgTextUtils.repositionMathGroup(ltext);
 
             var tbb = getHoverTextBBox(gd, ltext);
             var lx, ly;
@@ -1758,10 +1759,10 @@ function createHoverText(hoverData, opts) {
         function finalizePosition() {
             g.attr('transform', '');
             tx.call(svgTextUtils.positionText, 0, 0);
-            svgTextUtils.repositionMathGroup(tx);
+            d.numsMathSize = svgTextUtils.repositionMathGroup(tx);
             if (hasName) {
                 tx2.call(svgTextUtils.positionText, 0, 0);
-                svgTextUtils.repositionMathGroup(tx2);
+                d.nameMathSize = svgTextUtils.repositionMathGroup(tx2);
             }
 
             g.select('path').style({
@@ -2726,9 +2727,11 @@ const getTopOffset = (gd) => gd.offsetTop + gd.clientTop;
 const getLeftOffset = (gd) => gd.offsetLeft + gd.clientLeft;
 
 function getBoundingClientRect(gd, node) {
-    var fullLayout = gd._fullLayout;
+    return toLayoutRect(gd, node.getBoundingClientRect());
+}
 
-    var rect = node.getBoundingClientRect();
+function toLayoutRect(gd, rect) {
+    var fullLayout = gd._fullLayout;
 
     var x0 = rect.left;
     var y0 = rect.top;
 
@@ -202,7 +202,8 @@ module.exports = {
                 'regardless of length. 0-3 shows the first 0-3 characters, and',
                 'an integer >3 will show the whole name if it is less than that',
                 'many characters, but if it is longer, will truncate to',
-                '`namelength - 3` characters and add an ellipsis.'
+                '`namelength - 3` characters and add an ellipsis.',
+                'A name that is a single tex expression is always shown in full.'
             ].join(' ')
         },
         showarrow: {
 
@@ -38,49 +38,16 @@ const isPureTex = (str) => {
 exports.isPureTex = isPureTex;
 
 /**
- * Size of the typeset glyphs in their own coordinate system when an ancestor
- * is rotated (e.g. a hover label in hovermode 'y'), where getBoundingClientRect
- * would report the larger screen-space box of the rotated shape.
+ * Measures the typeset glyphs of a MathJax svg.
  *
  * @param {d3 selection} newSvg: the typeset <svg>
- * @param {d3 selection} g: the <g> inside newSvg that holds the glyphs
- * @return {?{width: number, height: number}} null if no ancestor is rotated
- */
-function getUnrotatedSize(newSvg, g) {
-    var svgNode = newSvg.node();
-    var ctm = svgNode.getScreenCTM();
-    if(!ctm || (Math.abs(ctm.b) < 1e-6 && Math.abs(ctm.c) < 1e-6)) return null;
-
-    var bbox = g.node().getBBox();
-    var viewBox = svgNode.viewBox.baseVal;
-    // the glyphs are letterboxed, so they scale by the smaller of the two ratios
-    var scale = Math.min(
-        svgNode.width.baseVal.value / viewBox.width,
-        svgNode.height.baseVal.value / viewBox.height
-    );
-    return {width: bbox.width * scale, height: bbox.height * scale};
-}
-
-/**
- * Positions a MathJax-typeset group against its source <text> node's x/y
- * and text-anchor.
- *
- * @param {d3 selection} _context: the source <text> element
- * @param {string} svgClass: the '<baseClass>-math' class used on newSvg
- * @param {d3 selection} mathjaxGroup: the '<svgClass>-group' wrapper
- * @param {d3 selection} newSvg: the typeset <svg>, already sized
- * @param {string} textAnchor: _context's text-anchor to position against
- * @param {number} fontSize: _context's font size, for the baseline offset
  * @param {number} [width0]: the SVG's own reported width, to detect the
  *   Firefox v82+ overflow bug (see link below); omit to skip that check
  * @param {number} [height0]: same, for height
- * @param {boolean} [unrotated]: measure in the group's own coordinates when an
- *   ancestor is rotated. Off by default so convertToTspans' other callers keep
- *   the screen-space measurement they were laid out with
+ * @return {{width: number, height: number}}
  */
-function positionMathGroup(_context, svgClass, mathjaxGroup, newSvg, textAnchor, fontSize, width0, height0, unrotated) {
-    var g = newSvg.select('g');
-    var bb = (unrotated && getUnrotatedSize(newSvg, g)) || g.node().getBoundingClientRect();
+function measureMath(newSvg, width0, height0) {
+    var bb = newSvg.select('g').node().getBoundingClientRect();
     var w = bb.width;
     var h = bb.height;
     var w0 = width0 === undefined ? w : width0;
@@ -95,6 +62,25 @@ function positionMathGroup(_context, svgClass, mathjaxGroup, newSvg, textAnchor,
         h = bb.height;
     }
 
+    return {width: w, height: h};
+}
+
+/**
+ * Positions a MathJax-typeset group against its source <text> node's x/y
+ * and text-anchor.
+ *
+ * @param {d3 selection} _context: the source <text> element
+ * @param {string} svgClass: the '<baseClass>-math' class used on newSvg
+ * @param {d3 selection} mathjaxGroup: the '<svgClass>-group' wrapper
+ * @param {d3 selection} newSvg: the typeset <svg>, already sized
+ * @param {string} textAnchor: _context's text-anchor to position against
+ * @param {number} fontSize: _context's font size, for the baseline offset
+ * @param {{width: number, height: number}} size: the typeset glyphs' size
+ */
+function positionMathGroup(_context, svgClass, mathjaxGroup, newSvg, textAnchor, fontSize, size) {
+    var w = size.width;
+    var h = size.height;
+
     var x = +_context.attr('x');
     var y = +_context.attr('y');
 
@@ -258,7 +244,7 @@ exports.convertToTspans = function(_context, gd, _callback) {
                 var g = newSvg.select('g');
                 g.attr({fill: fill, stroke: fill});
 
-                positionMathGroup(_context, svgClass, mathjaxGroup, newSvg, textAnchor, fontSize, w0, h0);
+                positionMathGroup(_context, svgClass, mathjaxGroup, newSvg, textAnchor, fontSize, measureMath(newSvg, w0, h0));
 
                 if(_callback) _callback.call(_context, mathjaxGroup);
                 resolve(mathjaxGroup);
@@ -274,43 +260,52 @@ exports.convertToTspans = function(_context, gd, _callback) {
  * convertToTspans, to match its source <text> node's *current* x/y and
  * text-anchor.
  *
+ * The size is measured from the page, so it changes with the rotation or
+ * scale of whatever the group sits in. A caller that moves the text into such
+ * a state should measure once beforehand and pass that size back in.
+ *
  * @param {d3 selection} _context: the source <text> element
+ * @param {{width: number, height: number}} [size]: a size returned by an
+ *   earlier call, to use instead of measuring again
+ * @return {?{width: number, height: number}} the size used, or null if there
+ *   is no typeset group to reposition
  */
-exports.repositionMathGroup = function(_context) {
-    if(_context.empty()) return;
+exports.repositionMathGroup = function(_context, size) {
+    if(_context.empty()) return null;
 
     var svgClass = (_context.attr('class') ? _context.attr('class').split(' ')[0] : 'text') + '-math';
     var parent = d3.select(_context.node().parentNode);
     var mathjaxGroup = parent.select('g.' + svgClass + '-group');
     var newSvg = mathjaxGroup.select('svg.' + svgClass);
-    if(mathjaxGroup.empty() || newSvg.empty()) return;
+    if(mathjaxGroup.empty() || newSvg.empty()) return null;
 
+    size = size || measureMath(newSvg);
     var textAnchor = _context.attr('text-anchor');
     var fontSize = parseInt(_context.node().style.fontSize, 10);
-    positionMathGroup(_context, svgClass, mathjaxGroup, newSvg, textAnchor, fontSize, undefined, undefined, true);
+    positionMathGroup(_context, svgClass, mathjaxGroup, newSvg, textAnchor, fontSize, size);
+    return size;
 };
 
 /**
- * Finds the node whose bounding box represents a source <text> element's
- * rendered content: the typeset glyphs if convertToTspans replaced the text
- * with a MathJax group (the source itself is display:none in that case), or
- * the <text> node otherwise.
+ * The client rect of a source <text> element's rendered content: the typeset
+ * glyphs if convertToTspans replaced the text with a MathJax group (the source
+ * itself is display:none in that case), or the <text> node otherwise.
  *
  * @param {d3 selection} textSel: the source <text> element
- * @return {?Element} the node to measure, or null if textSel is empty
+ * @return {?DOMRect} null if textSel is empty
  */
-exports.getMathOrTextNode = function(textSel) {
+exports.getTextClientRect = function(textSel) {
     var node = textSel.node();
     if(!node) return null;
 
     var svgClass = (textSel.attr('class') ? textSel.attr('class').split(' ')[0] : 'text') + '-math';
     var mathGroup = d3.select(node.parentNode).select('g.' + svgClass + '-group');
-    if(mathGroup.empty()) return node;
+    if(mathGroup.empty()) return node.getBoundingClientRect();
 
-    // Firefox can report a near-empty getBoundingClientRect for the group
-    // itself (seen on rotated hover labels), but measures the glyphs correctly
+    // Firefox can report a near-empty rect for the group itself (seen on
+    // rotated hover labels), but measures the glyphs inside it correctly
     var glyphs = mathGroup.select('svg g');
-    return (glyphs.empty() ? mathGroup : glyphs).node();
+    return (glyphs.empty() ? mathGroup : glyphs).node().getBoundingClientRect();
 };
 
 
 
@@ -449,7 +449,7 @@ export interface HoverLabel {
     /** Sets the font used in hover labels. */
     font?: FontArray;
     /**
-     * Sets the default length (in number of characters) of the trace name in the hover labels for all traces. -1 shows the whole name regardless of length. 0-3 shows the first 0-3 characters, and an integer >3 will show the whole name if it is less than that many characters, but if it is longer, will truncate to `namelength - 3` characters and add an ellipsis.
+     * Sets the default length (in number of characters) of the trace name in the hover labels for all traces. -1 shows the whole name regardless of length. 0-3 shows the first 0-3 characters, and an integer >3 will show the whole name if it is less than that many characters, but if it is longer, will truncate to `namelength - 3` characters and add an ellipsis. A name that is a single tex expression is always shown in full.
      * @default 15
      * Minimum: -1
      */
@@ -1588,7 +1588,7 @@ export interface CandlestickData {
         /** Sets the font used in hover labels. */
         font?: FontArray;
         /**
-         * Sets the default length (in number of characters) of the trace name in the hover labels for all traces. -1 shows the whole name regardless of length. 0-3 shows the first 0-3 characters, and an integer >3 will show the whole name if it is less than that many characters, but if it is longer, will truncate to `namelength - 3` characters and add an ellipsis.
+         * Sets the default length (in number of characters) of the trace name in the hover labels for all traces. -1 shows the whole name regardless of length. 0-3 shows the first 0-3 characters, and an integer >3 will show the whole name if it is less than that many characters, but if it is longer, will truncate to `namelength - 3` characters and add an ellipsis. A name that is a single tex expression is always shown in full.
          * @default 15
          * Minimum: -1
          */
@@ -6085,7 +6085,7 @@ export interface OhlcData {
         /** Sets the font used in hover labels. */
         font?: FontArray;
         /**
-         * Sets the default length (in number of characters) of the trace name in the hover labels for all traces. -1 shows the whole name regardless of length. 0-3 shows the first 0-3 characters, and an integer >3 will show the whole name if it is less than that many characters, but if it is longer, will truncate to `namelength - 3` characters and add an ellipsis.
+         * Sets the default length (in number of characters) of the trace name in the hover labels for all traces. -1 shows the whole name regardless of length. 0-3 shows the first 0-3 characters, and an integer >3 will show the whole name if it is less than that many characters, but if it is longer, will truncate to `namelength - 3` characters and add an ellipsis. A name that is a single tex expression is always shown in full.
          * @default 15
          * Minimum: -1
          */
@@ -16276,7 +16276,7 @@ export interface Layout {
         /** Sets the font for group titles in hover (unified modes). Defaults to `hoverlabel.font`. */
         grouptitlefont?: Font;
         /**
-         * Sets the default length (in number of characters) of the trace name in the hover labels for all traces. -1 shows the whole name regardless of length. 0-3 shows the first 0-3 characters, and an integer >3 will show the whole name if it is less than that many characters, but if it is longer, will truncate to `namelength - 3` characters and add an ellipsis.
+         * Sets the default length (in number of characters) of the trace name in the hover labels for all traces. -1 shows the whole name regardless of length. 0-3 shows the first 0-3 characters, and an integer >3 will show the whole name if it is less than that many characters, but if it is longer, will truncate to `namelength - 3` characters and add an ellipsis. A name that is a single tex expression is always shown in full.
          * @default 15
          * Minimum: -1
          */
 
@@ -734,6 +734,52 @@ describe('Test MathJax v' + mathjaxVersion + ':', function() {
             .then(done, done.fail);
         });
 
+        it('should keep a pure-tex main label inside its box for rotated labels in hovermode y', function(done) {
+            var template = '$\\sum_{i=1}^{n} x_i$<extra>one</extra>';
+
+            Plotly.newPlot(gd, {
+                data: [
+                    {type: 'scatter', mode: 'markers', x: [1], y: [1], hovertemplate: template},
+                    {type: 'scatter', mode: 'markers', x: [2], y: [1], hovertemplate: template}
+                ],
+                layout: {
+                    width: 500,
+                    height: 400,
+                    margin: {l: 0, t: 0, r: 0, b: 0},
+                    xaxis: {range: [0, 4]},
+                    yaxis: {range: [0, 4]},
+                    hovermode: 'y'
+                }
+            })
+            .then(function() {
+                _hover(125, 300);
+                return delay(30)();
+            })
+            .then(function() {
+                var hoverTexts = d3Select(gd).selectAll('g.hovertext');
+
+                expect(hoverTexts.size()).toBe(2, 'two hover labels');
+                expect(hoverTexts.attr('transform')).toContain('rotate', 'labels are rotated');
+
+                hoverTexts.each(function() {
+                    var g = d3Select(this);
+                    var mathGroup = g.select('.nums-math-group');
+
+                    expect(mathGroup.size()).toBe(1, 'main label math group');
+
+                    var m = mathGroup.select('svg g').node().getBoundingClientRect();
+                    var b = g.select('path').node().getBoundingClientRect();
+                    var tol = 1;
+
+                    expect(m.left).not.toBeLessThan(b.left - tol, 'tex inside the box, left');
+                    expect(m.right).not.toBeGreaterThan(b.right + tol, 'tex inside the box, right');
+                    expect(m.top).not.toBeLessThan(b.top - tol, 'tex inside the box, top');
+                    expect(m.bottom).not.toBeGreaterThan(b.bottom + tol, 'tex inside the box, bottom');
+                });
+            })
+            .then(done, done.fail);
+        });
+
         it('should hand a pure-tex Fx.loneHover label off to MathJax, sized to its final content', function(done) {
             Plotly.newPlot(gd, {
                 data: [{type: 'scatter', mode: 'markers', x: [1], y: [1]}],