diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js index ce3eadc1b3d..62338aba424 100644 --- a/src/plot_api/plot_api.js +++ b/src/plot_api/plot_api.js @@ -3802,6 +3802,7 @@ function makePlotFramework(gd) { .classed('gl-container', true); fullLayout._paperdiv.selectAll('.main-svg').remove(); + fullLayout._paperdiv.select('.modebar-container').remove(); fullLayout._paper = fullLayout._paperdiv.insert('svg', ':first-child') .classed('main-svg', true); diff --git a/test/jasmine/tests/hover_label_test.js b/test/jasmine/tests/hover_label_test.js index 446bff0cf37..89792ed50ae 100644 --- a/test/jasmine/tests/hover_label_test.js +++ b/test/jasmine/tests/hover_label_test.js @@ -3221,6 +3221,36 @@ describe('hovermode defaults to', function() { }); }); +describe('hover labels z-position', function() { + var gd; + + beforeEach(function() { + gd = createGraphDiv(); + }); + + afterEach(destroyGraphDiv); + var mock = require('@mocks/14.json'); + + it('is above the modebar', function(done) { + Plotly.plot(gd, mock).then(function() { + var infolayer = document.getElementsByClassName('infolayer'); + var modebar = document.getElementsByClassName('modebar-container'); + var hoverlayer = document.getElementsByClassName('hoverlayer'); + + expect(infolayer.length).toBe(1); + expect(modebar.length).toBe(1); + expect(hoverlayer.length).toBe(1); + + var compareMask = infolayer[0].compareDocumentPosition(modebar[0]); + expect(compareMask).toBe(Node.DOCUMENT_POSITION_FOLLOWING, '.modebar-container appears after the .infolayer'); + + compareMask = modebar[0].compareDocumentPosition(hoverlayer[0]); + expect(compareMask).toBe(Node.DOCUMENT_POSITION_FOLLOWING, '.hoverlayer appears after the .modebar'); + }) + .catch(failTest) + .then(done); + }); +}); describe('touch devices', function() { afterEach(destroyGraphDiv); diff --git a/test/jasmine/tests/plot_api_test.js b/test/jasmine/tests/plot_api_test.js index c0cf010eab7..4203043719d 100644 --- a/test/jasmine/tests/plot_api_test.js +++ b/test/jasmine/tests/plot_api_test.js @@ -2683,6 +2683,23 @@ describe('Test plot api', function() { .catch(failTest) .then(done); }); + + it('should only have one modebar-container', function(done) { + var data = [{y: [1, 2]}]; + + Plotly.plot(gd, data).then(function() { + var modebars = document.getElementsByClassName('modebar-container'); + expect(modebars.length).toBe(1); + + return Plotly.newPlot(gd, data); + }) + .then(function() { + var modebars = document.getElementsByClassName('modebar-container'); + expect(modebars.length).toBe(1); + }) + .catch(failTest) + .then(done); + }); }); describe('Plotly.update should', function() {