Make hover spikes work when no tick labels are present

src/plots/cartesian/axes.js

@@ -1825,9 +1825,16 @@ axes.doTicks = function(gd, axid, skipTitle) {
         // tick labels - for now just the main labels.
         // TODO: mirror labels, esp for subplots
         var tickLabels = container.selectAll('g.' + tcls).data(vals, datafn);
-        if(!ax.showticklabels || !isNumeric(position)) {
+
+        if(!isNumeric(position)) {
+            tickLabels.remove();
+            drawAxTitle();
+            return;
+        }
+        if(!ax.showticklabels) {
             tickLabels.remove();
             drawAxTitle();
+            calcBoundingBox();
             return;
         }
 
@@ -1993,23 +2000,59 @@ axes.doTicks = function(gd, axid, skipTitle) {
         }
 
         function calcBoundingBox() {
-            var bBox = container.node().getBoundingClientRect();
-            var gdBB = gd.getBoundingClientRect();
-
-            /*
-             * the way we're going to use this, the positioning that matters
-             * is relative to the origin of gd. This is important particularly
-             * if gd is scrollable, and may have been scrolled between the time
-             * we calculate this and the time we use it
-             */
-            ax._boundingBox = {
-                width: bBox.width,
-                height: bBox.height,
-                left: bBox.left - gdBB.left,
-                right: bBox.right - gdBB.left,
-                top: bBox.top - gdBB.top,
-                bottom: bBox.bottom - gdBB.top
-            };
+            if(ax.showticklabels) {
+                var gdBB = gd.getBoundingClientRect();
+                var bBox = container.node().getBoundingClientRect();
+
+                /*
+                 * the way we're going to use this, the positioning that matters
+                 * is relative to the origin of gd. This is important particularly
+                 * if gd is scrollable, and may have been scrolled between the time
+                 * we calculate this and the time we use it
+                 */
+
+                ax._boundingBox = {
+                    width: bBox.width,
+                    height: bBox.height,
+                    left: bBox.left - gdBB.left,
+                    right: bBox.right - gdBB.left,
+                    top: bBox.top - gdBB.top,
+                    bottom: bBox.bottom - gdBB.top
+                };
+            } else {
+                var gs = fullLayout._size;
+                var pos;
+
+                // set dummy bbox for ticklabel-less axes
+
+                if(axLetter === 'x') {
+                    pos = ax.anchor === 'free' ?
+                        gs.t + gs.h * (1 - ax.position) :
+                        gs.t + gs.h * (1 - ax._anchorAxis.domain[{bottom: 0, top: 1}[ax.side]]);
+
+                    ax._boundingBox = {
+                        top: pos,
+                        bottom: pos,
+                        left: ax._offset,
+                        rigth: ax._offset + ax._length,
+                        width: ax._length,
+                        height: 0
+                    };
+                } else {
+                    pos = ax.anchor === 'free' ?
+                        gs.l + gs.w * ax.position :
+                        gs.l + gs.w * ax._anchorAxis.domain[{left: 0, right: 1}[ax.side]];
+
+                    ax._boundingBox = {
+                        left: pos,
+                        right: pos,
+                        bottom: ax._offset + ax._length,
+                        top: ax._offset,
+                        height: ax._length,
+                        width: 0
+                    };
+                }
+            }
 
             /*
              * for spikelines: what's the full domain of positions in the

test/jasmine/tests/hover_spikeline_test.js

@@ -4,6 +4,7 @@ var Plotly = require('@lib/index');
 var Fx = require('@src/components/fx');
 var Lib = require('@src/lib');
 
+var fail = require('../assets/fail_test');
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 
@@ -16,6 +17,7 @@ describe('spikeline', function() {
 
     describe('hover', function() {
         var mockCopy = Lib.extendDeep({}, mock);
+        var gd;
 
         mockCopy.layout.xaxis.showspikes = true;
         mockCopy.layout.xaxis.spikemode = 'toaxis';
@@ -24,8 +26,10 @@ describe('spikeline', function() {
         mockCopy.layout.xaxis2.showspikes = true;
         mockCopy.layout.xaxis2.spikemode = 'toaxis';
         mockCopy.layout.hovermode = 'closest';
+
         beforeEach(function(done) {
-            Plotly.plot(createGraphDiv(), mockCopy.data, mockCopy.layout).then(done);
+            gd = createGraphDiv();
+            Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(done);
         });
 
         it('draws lines and markers on enabled axes', function() {
@@ -34,6 +38,20 @@ describe('spikeline', function() {
             expect(d3.selectAll('circle.spikeline').size()).toEqual(1);
         });
 
+        it('draws lines and markers on enabled axes w/o tick labels', function(done) {
+            Plotly.relayout(gd, {
+                'xaxis.showticklabels': false,
+                'yaxis.showticklabels': false
+            })
+            .then(function() {
+                Fx.hover('graph', {xval: 2, yval: 3}, 'xy');
+                expect(d3.selectAll('line.spikeline').size()).toEqual(4);
+                expect(d3.selectAll('circle.spikeline').size()).toEqual(1);
+            })
+            .catch(fail)
+            .then(done);
+        });
+
         it('doesn\'t draw lines and markers on disabled axes', function() {
             Fx.hover('graph', {xval: 30, yval: 40}, 'x2y2');
             expect(d3.selectAll('line.spikeline').size()).toEqual(2);