diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx
index ec3a891e0..56bcd5392 100644
--- a/src/renderer/page/file/view.jsx
+++ b/src/renderer/page/file/view.jsx
@@ -170,7 +170,15 @@ class FilePage extends React.Component<Props> {
 
           <div className="media__properties media__properties--large">
             {isRewardContent && (
-              <Icon size={20} iconColor="red" tooltip="bottom" icon={icons.FEATURED} />
+              <Icon
+                size={20}
+                iconColor="red"
+                icon={icons.FEATURED}
+                // Figure out how to get the tooltip to overlap the navbar on the file page and I will love you
+                // https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue
+                // https://spee.ch/4/overflow-issue
+                // tooltip="bottom"
+              />
             )}
             {metadata.nsfw && <div className="badge badge--nsfw">NSFW</div>}
             <FilePrice badge uri={normalizeURI(uri)} />
diff --git a/src/renderer/scss/component/_animation.scss b/src/renderer/scss/component/_animation.scss
index 531dac101..fe2878ac5 100644
--- a/src/renderer/scss/component/_animation.scss
+++ b/src/renderer/scss/component/_animation.scss
@@ -62,6 +62,7 @@
   30% {
     width: 0.5rem;
   }
+
   40% {
     width: 0;
   }
diff --git a/src/renderer/scss/component/_tooltip.scss b/src/renderer/scss/component/_tooltip.scss
index 5feedeac8..01c3b5f7b 100644
--- a/src/renderer/scss/component/_tooltip.scss
+++ b/src/renderer/scss/component/_tooltip.scss
@@ -1,9 +1,10 @@
 .tooltip {
   display: inline-block;
   position: relative;
-  z-index: 2;
 
   .tooltip__body {
+    z-index: 2;
+
     visibility: hidden;
   }
 
@@ -17,7 +18,7 @@
     font-size: 1rem;
     color: $lbry-black;
     font-weight: 400;
-    padding: var(--spacing-vertical-small);
+    padding: var(--spacing-vertical-miniscule);
     position: absolute;
     text-align: center;
     white-space: pre-wrap;
@@ -28,7 +29,7 @@
     border-radius: 0.5rem;
 
     &.tooltip__body--short {
-      width: 130px;
+      width: 110px;
     }
 
     &::after {
@@ -100,22 +101,6 @@
   }
 }
 
-.tooltip--bottom .tooltip__body {
-  top: 90%;
-  left: 50%;
-  margin-left: -100px;
-
-  &.tooltip__body--short {
-    margin-left: -65px;
-  }
-
-  &::after {
-    bottom: 101%;
-    left: 50%;
-    margin-left: -5px;
-  }
-}
-
 .tooltip--left .tooltip__body {
   top: -5px;
   right: 105%;
@@ -128,23 +113,39 @@
 }
 
 .tooltip--right .tooltip__body {
-  margin-top: -30px;
+  margin-top: -28px;
   margin-left: 110%;
 
   &::after {
-    top: 17px;
+    top: 14px;
     right: 100%; // To the left of the tooltip
     margin-top: -5px;
   }
 }
 
+.tooltip--bottom .tooltip__body {
+  top: 90%;
+  left: 50%;
+  margin-left: -100px;
+
+  &.tooltip__body--short {
+    margin-left: -56px;
+  }
+
+  &::after {
+    bottom: 100%;
+    left: 50%;
+    margin-left: -5px;
+  }
+}
+
 .tooltip--top .tooltip__body {
   bottom: 120%;
   left: 50%;
   margin-left: -100px;
 
   &.tooltip__body--short {
-    margin-left: -65px;
+    margin-left: -56px;
   }
 
   &::after {