From 6e6e4b86cae08e6078cb76afb527af8b0694defb Mon Sep 17 00:00:00 2001
From: Sarabjot Kohli <sarabkohli29@gmail.com>
Date: Wed, 28 Aug 2019 15:48:30 -0700
Subject: [PATCH] improvement(editor): add title to toggle buttons (#2548)

---
 .../src/components/Editor/EditorInterface.js                 | 2 ++
 .../netlify-cms-core/src/components/Editor/EditorToggle.js   | 5 +++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/netlify-cms-core/src/components/Editor/EditorInterface.js b/packages/netlify-cms-core/src/components/Editor/EditorInterface.js
index 08cbbb82..a9a85651 100644
--- a/packages/netlify-cms-core/src/components/Editor/EditorInterface.js
+++ b/packages/netlify-cms-core/src/components/Editor/EditorInterface.js
@@ -257,12 +257,14 @@ class EditorInterface extends Component {
               active={previewVisible}
               onClick={this.handleTogglePreview}
               icon="eye"
+              title="Toggle preview"
             />
             <EditorToggle
               enabled={collectionPreviewEnabled && previewVisible}
               active={scrollSyncEnabled}
               onClick={this.handleToggleScrollSync}
               icon="scroll"
+              title="Sync scrolling"
             />
           </ViewControls>
           {collectionPreviewEnabled && this.state.previewVisible ? (
diff --git a/packages/netlify-cms-core/src/components/Editor/EditorToggle.js b/packages/netlify-cms-core/src/components/Editor/EditorToggle.js
index 668f6fb2..635ef85f 100644
--- a/packages/netlify-cms-core/src/components/Editor/EditorToggle.js
+++ b/packages/netlify-cms-core/src/components/Editor/EditorToggle.js
@@ -18,9 +18,9 @@ const EditorToggleButton = styled.button`
   margin-bottom: 12px;
 `;
 
-const EditorToggle = ({ enabled, active, onClick, icon }) =>
+const EditorToggle = ({ enabled, active, onClick, icon, title }) =>
   !enabled ? null : (
-    <EditorToggleButton onClick={onClick} isActive={active}>
+    <EditorToggleButton onClick={onClick} isActive={active} title={title}>
       <Icon type={icon} size="large" />
     </EditorToggleButton>
   );
@@ -30,6 +30,7 @@ EditorToggle.propTypes = {
   active: PropTypes.bool,
   onClick: PropTypes.func.isRequired,
   icon: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
 };
 
 export default EditorToggle;