Adds delay before note is displayed on hover. Solves issue #658. (#668)

* Adds delay

* change delay to half second.

* Added async

* Changed Delay

* lint fix

* Changed hover actions

* onMouseLeave

* Change logic

---------

Co-authored-by: Jed Fox <git@jedfox.com>

packages/loot-design/src/components/NotesButton.js

@@ -79,6 +79,22 @@ export default function NotesButton({
     tooltip.close();
   }
 
+  const [delayHandler, setDelayHandler] = useState(null);
+
+  const handleMouseEnter = event => {
+    setDelayHandler(
+      setTimeout(() => {
+        // whatever your data is
+        setHover(true);
+      }, 300),
+    );
+  };
+
+  const handleMouseLeave = () => {
+    clearTimeout(delayHandler);
+    setHover(false);
+  };
+
   // This account for both the tooltip hover, and editing tooltip
   const tooltipOpen = tooltip.isOpen || (hasNotes && hover);
 
@@ -97,8 +113,12 @@ export default function NotesButton({
           '& button, & .hover-visible': { display: 'flex', opacity: 1 },
         },
       ]}
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
+      onMouseEnter={async () => {
+        handleMouseEnter();
+      }}
+      onMouseLeave={() => {
+        handleMouseLeave();
+      }}
     >
       <Button
         bare