App :: Add tooltip for copy to clipboard button

src/App.js

@@ -85,6 +85,7 @@ class App extends Component {
     this.state = {
       ready: false,
       darkMode: false,
+      copied: false,
       sidebar: true,
       codeView: false,
       view: 'desktop',
@@ -211,10 +212,16 @@ class App extends Component {
     input.select();
     document.execCommand('copy');
     document.body.removeChild(input);
+    this.setState({copied: true});
+    setTimeout(() => {
+      this.setState({
+        copied: false
+      })
+    }, 2000);
 }
 
   render() {
-    const { darkMode, theme, blockName, blockType, sidebar, view } = this.state;
+    const { darkMode, theme, blockName, blockType, sidebar, view, copied } = this.state;
     return (
       <div className={`app${darkMode ? ' dark-mode' : ''}${sidebar ? ' has-sidebar' : ''} ${theme} ${view}`}>
         <textarea className="copy-textarea" ref={this.textareaRef} />
@@ -223,11 +230,14 @@ class App extends Component {
         </aside>
         <div className="toolbar">
           <button className="opener" onClick={this.toggleSidebar}>TAILBLOCKS</button>
-          {this.state.codeView ? (
+          {this.state.codeView &&
+            <div className="clipboard-wrapper">
               <button className="copy-the-block copy-to-clipboard" onClick={this.copyToClipboard}>
                 {clipboardIcon}
                 <span>COPY TO CLIPBOARD</span>
-            </button>) : ''
+              </button>
+              <span className={`clipboard-tooltip${copied ? ' is-copied ' : ''}`} >Copied!</span>
+            </div>
           }
           <button className="copy-the-block" onClick={this.toggleView}>
             {!this.state.codeView ?

src/index.css

@@ -559,3 +559,27 @@ pre, code {
   align-items: center;
   justify-content: center;
 }
+
+.clipboard-wrapper {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+}
+
+.clipboard-tooltip {
+  margin-right: -10px;
+  color: #fff;
+  font-size: 13px;
+  background-color: rgba(255, 255, 255, 0.4);
+  padding: 2px 5px;
+  letter-spacing: .2px;
+  border-radius: 4px;
+  position: relative; 
+  opacity: 0;
+  transition: opacity .4s, margin-right .4s;
+}
+
+.clipboard-tooltip.is-copied {
+  margin-right: 6px;
+  opacity: 1;
+}