diff --git a/src/renderer/components/tooltip/tooltip.scss b/src/renderer/components/tooltip/tooltip.scss
index 8747cbf2c6..10b7669679 100644
--- a/src/renderer/components/tooltip/tooltip.scss
+++ b/src/renderer/components/tooltip/tooltip.scss
@@ -25,14 +25,15 @@
   pointer-events: none;
   transition: opacity 150ms 150ms ease-in-out;
   z-index: 100000;
-  opacity: 1;
   box-shadow: 0 8px 16px rgba(0,0,0,0.24);
+  left: 0;
+  top: 0;
+  opacity: 0;
+  visibility: hidden;
 
-  &.invisible {
-    left: 0;
-    top: 0;
-    opacity: 0;
-    visibility: hidden;
+  &.visible {
+    opacity: 1;
+    visibility: visible;
   }
 
   &:empty {
diff --git a/src/renderer/components/tooltip/tooltip.tsx b/src/renderer/components/tooltip/tooltip.tsx
index 3f2517d35e..3e35c837a5 100644
--- a/src/renderer/components/tooltip/tooltip.tsx
+++ b/src/renderer/components/tooltip/tooltip.tsx
@@ -216,7 +216,7 @@ export class Tooltip extends React.Component<TooltipProps> {
   render() {
     const { style, formatters, usePortal, children, visible } = this.props;
     const className = cssNames("Tooltip", this.props.className, formatters, this.activePosition, {
-      invisible: visible === undefined ? !this.isVisible : !visible,
+      visible: visible ?? this.isVisible,
       formatter: !!formatters,
     });
     const tooltip = (