improve fallback for button 'title':

- don't show hover text when 'title' is set to null or false or ''
- if undefined, fall back to 'name'

Author: etpinard

src/components/modebar/buttons.js

@@ -23,7 +23,8 @@ var modebarButtons = module.exports = {};
  * @param {string} name
  *      name / id of the buttons (for tracking)
  * @param {string} title
- *      text that appears while hovering over the button
+ *      text that appears while hovering over the button,
+ *      enter null, false or '' for no hover text
  * @param {string} icon
  *      svg icon associated with the button
  * @param {string} [gravity]
@@ -68,7 +69,6 @@ modebarButtons.toImage = {
         filename += '.' + format;
 
         ev.once('success', function(result) {
-
             gd._snapshotInProgress = false;
 
             var downloadLink = document.createElement('a');

src/components/modebar/index.js

@@ -121,8 +121,10 @@ proto.createButton = function (config) {
     button.setAttribute('rel', 'tooltip');
     button.className = 'modebar-btn';
 
-    button.setAttribute('data-title', config.title || '');
-    button.setAttribute('data-gravity', config.gravity || 'n');
+    var title = config.title;
+    if(title !== null && title !== false && title !== '') {
+        button.setAttribute('data-title', title || config.name);
+    }
 
     if(config.attr !== undefined) button.setAttribute('data-attr', config.attr);
 
@@ -147,6 +149,7 @@ proto.createButton = function (config) {
     if(config.toggle) button.classList.add('active');
 
     button.appendChild(this.createIcon(config.icon || Icons.tooltip_basic));
+    button.setAttribute('data-gravity', config.gravity || 'n');
 
     return button;
 };

test/jasmine/tests/modebar_test.js

@@ -7,7 +7,7 @@ var manageModebar = require('@src/components/modebar/manage');
 describe('Modebar', function() {
     'use strict';
 
-    function noop() {};
+    function noop() {}
 
     function getMockContainerTree() {
         var root = document.createElement('div');
@@ -45,6 +45,10 @@ describe('Modebar', function() {
         return d3.select(modebar.element).selectAll('a.plotlyjsicon')[0].length;
     }
 
+    function checkBtnAttr(modebar, index, attr) {
+        var buttons = d3.select(modebar.element).selectAll('a.modebar-btn');
+        return d3.select(buttons[0][index]).attr(attr);
+    }
 
     var buttons = [[{
         name: 'button 1',
@@ -88,6 +92,32 @@ describe('Modebar', function() {
             }).toThrowError();
         });
 
+        it('defaults title to name when missing', function() {
+            var modebar = createModebar(getMockGraphInfo(), [[
+                { name: 'the title too', click: noop }
+            ]]);
+
+            expect(checkBtnAttr(modebar, 0, 'data-title')).toEqual('the title too');
+        });
+
+        it('hides title to when title is set to null or \'\' or false', function() {
+            var modebar;
+
+            modebar = createModebar(getMockGraphInfo(), [[
+                { name: 'button', title: null, click: noop }
+            ]]);
+            expect(checkBtnAttr(modebar, 0, 'data-title')).toBe(null);
+
+            modebar = createModebar(getMockGraphInfo(), [[
+                { name: 'button', title: '', click: noop }
+            ]]);
+            expect(checkBtnAttr(modebar, 0, 'data-title')).toBe(null);
+
+            modebar = createModebar(getMockGraphInfo(), [[
+                { name: 'button', title: false, click: noop }
+            ]]);
+            expect(checkBtnAttr(modebar, 0, 'data-title')).toBe(null);
+        });
     });
 
     describe('modebar.removeAllButtons', function() {