Merge pull request #3589 from plotly/fix-3471

Display hoverlabels above modebar

Author: antoinerg

build/plotcss.js

@@ -31,7 +31,7 @@ var rules = {
     "X .cursor-n-resize": "cursor:n-resize;",
     "X .cursor-ne-resize": "cursor:ne-resize;",
     "X .cursor-grab": "cursor:-webkit-grab;cursor:grab;",
-    "X .modebar": "position:absolute;top:2px;right:2px;z-index:1001;",
+    "X .modebar": "position:absolute;top:2px;right:2px;",
     "X .ease-bg": "-webkit-transition:background-color 0.3s ease 0s;-moz-transition:background-color 0.3s ease 0s;-ms-transition:background-color 0.3s ease 0s;-o-transition:background-color 0.3s ease 0s;transition:background-color 0.3s ease 0s;",
     "X .modebar--hover>:not(.watermark)": "opacity:0;-webkit-transition:opacity 0.3s ease 0s;-moz-transition:opacity 0.3s ease 0s;-ms-transition:opacity 0.3s ease 0s;-o-transition:opacity 0.3s ease 0s;transition:opacity 0.3s ease 0s;",
     "X:hover .modebar--hover .modebar-group": "opacity:1;",

src/css/_modebar.scss

@@ -2,7 +2,6 @@
     position: absolute;
     top: 2px;
     right: 2px;
-    z-index: 1001;
 }
 
 .ease-bg {

src/plot_api/plot_api.js

@@ -3808,6 +3808,11 @@ function makePlotFramework(gd) {
     fullLayout._toppaper = fullLayout._paperdiv.append('svg')
         .classed('main-svg', true);
 
+    fullLayout._modebardiv = fullLayout._paperdiv.append('div');
+
+    fullLayout._hoverpaper = fullLayout._paperdiv.append('svg')
+        .classed('main-svg', true);
+
     if(!fullLayout._uid) {
         var otherUids = {};
         d3.selectAll('defs').each(function() {
@@ -3884,11 +3889,10 @@ function makePlotFramework(gd) {
     fullLayout._infolayer = fullLayout._toppaper.append('g').classed('infolayer', true);
     fullLayout._menulayer = fullLayout._toppaper.append('g').classed('menulayer', true);
     fullLayout._zoomlayer = fullLayout._toppaper.append('g').classed('zoomlayer', true);
-    fullLayout._hoverlayer = fullLayout._toppaper.append('g').classed('hoverlayer', true);
+    fullLayout._hoverlayer = fullLayout._hoverpaper.append('g').classed('hoverlayer', true);
 
     // Make the modebar container
-    fullLayout._modebardiv = fullLayout._paperdiv.selectAll('.modebar-container').data([0]);
-    fullLayout._modebardiv.enter().append('div')
+    fullLayout._modebardiv
         .classed('modebar-container', true)
         .style('position', 'absolute')
         .style('top', '0px')

test/jasmine/tests/plots_test.js

@@ -329,7 +329,7 @@ describe('Test Plots', function() {
 
             it('should resize the main svgs', function() {
                 var mainSvgs = document.getElementsByClassName('main-svg');
-                expect(mainSvgs.length).toBe(2);
+                expect(mainSvgs.length).toBe(3);
 
                 for(var i = 0; i < mainSvgs.length; i++) {
                     var svg = mainSvgs[i];
@@ -343,7 +343,7 @@ describe('Test Plots', function() {
 
             it('should update the axis scales', function() {
                 var mainSvgs = document.getElementsByClassName('main-svg');
-                expect(mainSvgs.length).toBe(2);
+                expect(mainSvgs.length).toBe(3);
 
                 var fullLayout = gd._fullLayout;
                 var plotinfo = fullLayout._plots.xy;
@@ -357,7 +357,7 @@ describe('Test Plots', function() {
 
             it('should allow resizing by plot ID', function(done) {
                 var mainSvgs = document.getElementsByClassName('main-svg');
-                expect(mainSvgs.length).toBe(2);
+                expect(mainSvgs.length).toBe(3);
 
                 expect(typeof gd.id).toBe('string');
                 expect(gd.id).toBeTruthy();