From a1ddcf2b7bc752bec7cd380dc0fd01f1bb932577 Mon Sep 17 00:00:00 2001
From: Robin Dadswell <19610103+RobinDadswell@users.noreply.github.com>
Date: Sun, 7 Feb 2021 03:15:31 +0000
Subject: [PATCH] New: Show number of files as tooltip over size on disk

Closes #4203
---
 frontend/src/Components/Tooltip/Tooltip.css   |  1 +
 frontend/src/Series/Details/SeriesDetails.css |  7 ++++
 frontend/src/Series/Details/SeriesDetails.js  | 40 ++++++++++++-------
 3 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/frontend/src/Components/Tooltip/Tooltip.css b/frontend/src/Components/Tooltip/Tooltip.css
index c5ddc7272..7075042d2 100644
--- a/frontend/src/Components/Tooltip/Tooltip.css
+++ b/frontend/src/Components/Tooltip/Tooltip.css
@@ -14,6 +14,7 @@
   &.inverse {
     background-color: $themeDarkColor;
     box-shadow: 0 5px 10px $popoverShadowInverseColor;
+    color: $white;
   }
 }
 
diff --git a/frontend/src/Series/Details/SeriesDetails.css b/frontend/src/Series/Details/SeriesDetails.css
index e5a70f282..686a0c30f 100644
--- a/frontend/src/Series/Details/SeriesDetails.css
+++ b/frontend/src/Series/Details/SeriesDetails.css
@@ -119,6 +119,13 @@
   margin: 5px 10px 5px 0;
 }
 
+.fileCountMessage {
+  padding: 5px;
+  white-space: nowrap;
+  font-weight: 300;
+  font-size: 15px;
+}
+
 .path,
 .sizeOnDisk,
 .qualityProfileName,
diff --git a/frontend/src/Series/Details/SeriesDetails.js b/frontend/src/Series/Details/SeriesDetails.js
index 7b0856ccb..74ff7f567 100644
--- a/frontend/src/Series/Details/SeriesDetails.js
+++ b/frontend/src/Series/Details/SeriesDetails.js
@@ -432,22 +432,32 @@ class SeriesDetails extends Component {
                     </span>
                   </Label>
 
-                  <Label
-                    className={styles.detailsLabel}
-                    title={episodeFilesCountMessage}
-                    size={sizes.LARGE}
-                  >
-                    <Icon
-                      name={icons.DRIVE}
-                      size={17}
-                    />
+                  <Tooltip
+                    anchor={
+                      <Label
+                        className={styles.detailsLabel}
+                        size={sizes.LARGE}
+                      >
+                        <Icon
+                          name={icons.DRIVE}
+                          size={17}
+                        />
 
-                    <span className={styles.sizeOnDisk}>
-                      {
-                        formatBytes(sizeOnDisk || 0)
-                      }
-                    </span>
-                  </Label>
+                        <span className={styles.sizeOnDisk}>
+                          {
+                            formatBytes(sizeOnDisk || 0)
+                          }
+                        </span>
+                      </Label>
+                    }
+                    tooltip={
+                      <span>
+                        {episodeFilesCountMessage}
+                      </span>
+                    }
+                    kind={kinds.INVERSE}
+                    position={tooltipPositions.BOTTOM}
+                  />
 
                   <Label
                     className={styles.detailsLabel}