Feat: Tooltips

Author: peterjuma

src/App.js

@@ -369,6 +369,16 @@ class App extends Component {
   }
 
   handleCopyEvent(e, copiedContent = "") {
+    if (copiedContent) {
+      return navigator.clipboard
+        .writeText(copiedContent)
+        .then(() => {
+          // Success!
+        })
+        .catch((err) => {
+          console.log("Something went wrong", err);
+        });
+    }
     if (typeof window.getSelection != "undefined") {
       var sel = window.getSelection();
       if (sel.rangeCount) {
@@ -383,10 +393,14 @@ class App extends Component {
         copiedContent = document.selection.createRange().htmlText;
       }
     }
-
-    e.clipboardData.setData("text/html", copied);
-    e.clipboardData.setData("text/plain", html2md.turndown(copied));
-    e.preventDefault();
+    navigator.clipboard
+      .writeText(html2md.turndown(copiedContent))
+      .then(() => {
+        // Success!
+      })
+      .catch((err) => {
+        console.log("Something went wrong", err);
+      });
   }
 
   handleSearchNotes(e) {

src/NavbarMain.js

@@ -6,31 +6,41 @@ function NavbarMain(props) {
   return (
     <div className={isActive === true ? "nav-bar" : "hidden"}>
       <div>
-        <i
-          className="far fa-copy btn"
-          id="copyBtn"
-          onClick={(e) => props.handleCopyNote(e, note)}
-        ></i>
-        <i
-          className="far fa-edit btn"
-          id="editbtn"
-          data-action="updatenote"
-          onClick={(e) => props.handleEditNoteBtn(e, note)}
-        >
-          {" "}
-        </i>
-        <i
-          className="far fa-trash-alt btn"
-          aria-hidden="true"
-          style={{ float: "right" }}
-          onClick={(e) => props.handleDeleteNote(e, note)}
-        ></i>
-        <i
-          className="far fa-arrow-alt-circle-down btn"
-          aria-hidden="true"
-          style={{ float: "right" }}
-          onClick={(e) => props.handleDownloadNote(note)}
-        ></i>
+        <span tooltip="Copy" flow="down">
+          <i
+            className="far fa-copy btn"
+            id="copyBtn"
+            onClick={(e) => props.handleCopyEvent(e, note.notebody)}
+          ></i>
+        </span>
+        <span tooltip="Edit" flow="down">
+          <i
+            className="far fa-edit btn"
+            id="editbtn"
+            data-action="updatenote"
+            onClick={(e) => props.handleEditNoteBtn(e, note)}
+          >
+            {" "}
+          </i>
+        </span>
+
+        <div style={{ float: "right" }}>
+          <span tooltip="Download" flow="down">
+            <i
+              className="far fa-arrow-alt-circle-down btn"
+              aria-hidden="true"
+              // style={{ float: "right" }}
+              onClick={(e) => props.handleDownloadNote(note)}
+            ></i>
+          </span>
+          <span tooltip="Delete" flow="down">
+            <i
+              className="far fa-trash-alt btn"
+              aria-hidden="true"
+              onClick={(e) => props.handleDeleteNote(e, note)}
+            ></i>
+          </span>
+        </div>
       </div>
     </div>
   );

src/NavbarSidebar.js

@@ -15,20 +15,24 @@ function NavbarSidebar(props) {
     <div>
       <div className="nav-bar-left">
         <div className="nav-left-icon">
-          <i
-            id="homeBtn"
-            onClick={(e) => props.handleClickHomeBtn(e)}
-            className="fa fa-home btn"
-            aria-hidden="true"
-          ></i>
+          <span tooltip="Home" flow="right">
+            <i
+              id="homeBtn"
+              onClick={(e) => props.handleClickHomeBtn(e)}
+              className="fa fa-home btn"
+              aria-hidden="true"
+            ></i>
+          </span>
           <h4>Notes</h4>
-          <i
-            id="addNoteBtn"
-            data-action="addnote"
-            onClick={(e) => props.handleEditNoteBtn(e, note)}
-            className="fa fa-plus btn"
-            aria-hidden="true"
-          ></i>
+          <span tooltip="Add Note" flow="left">
+            <i
+              id="addNoteBtn"
+              data-action="addnote"
+              onClick={(e) => props.handleEditNoteBtn(e, note)}
+              className="fa fa-plus btn"
+              aria-hidden="true"
+            ></i>
+          </span>
         </div>
       </div>
       <div className="search-bar">