Medium Support (Multi-disc Albums), Quality Grouping (#121)

* Multi Disc Stage 1 - Backend Work

* Quality Group Functionality

* Fixed: Only show wanted album types on ArtistDetail page

* Add Media Count Column to ArtistDetail Page

* Parser updates for multidisc cases, other usenet release title formats

* Search for Tracks by Medium Number in Addition to Title and TrackNumber

* Medium Renaming Token for Track Naming

* fixup Codacy and Comment Cleanup

* fixup remove comments

frontend/src/Components/Tooltip/Popover.js

@@ -53,6 +53,14 @@ class Popover extends Component {
     this.state = {
       isOpen: false
     };
+
+    this._closeTimeout = null;
+  }
+
+  componentWillUnmount() {
+    if (this._closeTimeout) {
+      this._closeTimeout = clearTimeout(this._closeTimeout);
+    }
   }
 
   //
@@ -63,11 +71,17 @@ class Popover extends Component {
   }
 
   onMouseEnter = () => {
+    if (this._closeTimeout) {
+      this._closeTimeout = clearTimeout(this._closeTimeout);
+    }
+
     this.setState({ isOpen: true });
   }
 
   onMouseLeave = () => {
-    this.setState({ isOpen: false });
+    this._closeTimeout = setTimeout(() => {
+      this.setState({ isOpen: false });
+    }, 100);
   }
 
   //
@@ -98,24 +112,28 @@ class Popover extends Component {
 
         {
           this.state.isOpen &&
-            <div className={styles.popoverContainer}>
-              <div className={styles.popover}>
-                <div
-                  className={classNames(
-                    styles.arrow,
-                    styles[position]
-                  )}
-                />
+          <div
+            className={styles.popoverContainer}
+            onMouseEnter={this.onMouseEnter}
+            onMouseLeave={this.onMouseLeave}
+          >
+            <div className={styles.popover}>
+              <div
+                className={classNames(
+                  styles.arrow,
+                  styles[position]
+                )}
+              />
 
-                <div className={styles.title}>
-                  {title}
-                </div>
+              <div className={styles.title}>
+                {title}
+              </div>
 
-                <div className={styles.body}>
-                  {body}
-                </div>
+              <div className={styles.body}>
+                {body}
               </div>
             </div>
+          </div>
         }
       </TetherComponent>
     );