Add custom tooltips to toolbar buttons (#1214)

* Add custom tooltips to toolbar buttons

* Avoid redundancy in the aria-label

* Remove disableTooltip option on IconButton

* Bring tooltip closer to button

lib/icon-button/index.js

@@ -1,14 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Tooltip from '@material-ui/core/Tooltip';
 
-export const IconButton = ({ icon, ...props }) => (
-  <button className="icon-button" type="button" {...props}>
-    {icon}
-  </button>
+export const IconButton = ({ icon, title, ...props }) => (
+  <Tooltip
+    classes={{ tooltip: 'icon-button__tooltip' }}
+    enterDelay={200}
+    title={title}
+  >
+    <button className="icon-button" type="button" {...props}>
+      {icon}
+    </button>
+  </Tooltip>
 );
 
 IconButton.propTypes = {
+  disableTooltip: PropTypes.bool,
   icon: PropTypes.element.isRequired,
+  title: PropTypes.string.isRequired,
 };
 
 export default IconButton;

lib/icon-button/style.scss

@@ -17,3 +17,8 @@
     }
   }
 }
+
+.icon-button__tooltip {
+  position: relative;
+  top: -8px;
+}

lib/note-toolbar/index.jsx

@@ -97,7 +97,7 @@ export class NoteToolbar extends Component {
               <IconButton
                 icon={isPreviewing ? <PreviewStopIcon /> : <PreviewIcon />}
                 onClick={this.setEditorMode}
-                title="Preview"
+                title="Preview • Ctrl+Shift+P"
               />
             </div>
           )}