From cd19d9ba6d74986ce748705e5305d8f56cd1d429 Mon Sep 17 00:00:00 2001
From: Matthew Stratford <hi@mstratford.net>
Date: Wed, 3 Feb 2021 23:32:12 +0000
Subject: [PATCH] Change the style that react-tooltip forgets.

---
 src/App.scss | 131 +++++++++++++++++++++++----------------------------
 1 file changed, 60 insertions(+), 71 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 4f271b7..8937ebb 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -226,75 +226,64 @@ $number-of-channels: 3;
 
 // Because react tooltip and empty show plans get very broken.
 .__react_component_tooltip {
-    color: #fff;
-    background: #222;
-    border: 1px solid transparent;
-
-  	&.place-top {
-        margin-top: -10px;
-    }
-    &.place-top::before {
-        border-top: 8px solid transparent;
-    }
-    &.place-top::after {
-        border-left: 8px solid transparent;
-        border-right: 8px solid transparent;
-        bottom: -6px;
-        left: 50%;
-        margin-left: -8px;
-        border-top-color: #222;
-        border-top-style: solid;
-        border-top-width: 6px;
-    }
-
-    &.place-bottom {
-        margin-top: 10px;
-    }
-    &.place-bottom::before {
-        border-bottom: 8px solid transparent;
-    }
-    &.place-bottom::after {
-        border-left: 8px solid transparent;
-        border-right: 8px solid transparent;
-        top: -6px;
-        left: 50%;
-        margin-left: -8px;
-        border-bottom-color: #222;
-        border-bottom-style: solid;
-        border-bottom-width: 6px;
-    }
-
-    &.place-left {
-        margin-left: -10px;
-    }
-    &.place-left::before {
-        border-left: 8px solid transparent;
-    }
-    &.place-left::after {
-        border-top: 5px solid transparent;
-        border-bottom: 5px solid transparent;
-        right: -6px;
-        top: 50%;
-        margin-top: -4px;
-        border-left-color: #222;
-        border-left-style: solid;
-        border-left-width: 6px;
-    }
-
-    &.place-right {
-        margin-left: 10px;
-    }
-    &.place-right::before {
-        border-right: 8px solid transparent;
-    }
-    &.place-right::after {
-        border-top: 5px solid transparent;
-        border-bottom: 5px solid transparent;
-        left: -6px;
-        top: 50%;
-        margin-top: -4px;
-        border-right-color: #222;
-        border-right-style: solid;
-        border-right-width: 6px;
-    }
+  border-radius: 3px;
+  display: inline-block;
+  font-size: 13px;
+  left: -999em;
+  opacity: 0;
+  padding: 8px 21px;
+  position: fixed;
+  pointer-events: none;
+  transition: opacity 0.3s ease-out;
+  top: -999em;
+  visibility: hidden;
+  z-index: 999;
+}
+.__react_component_tooltip.allow_hover, .__react_component_tooltip.allow_click {
+  pointer-events: auto;
+}
+.__react_component_tooltip::before, .__react_component_tooltip::after {
+  content: "";
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+.__react_component_tooltip.show {
+  opacity: 0.9;
+  margin-top: 0;
+  margin-left: 0;
+  visibility: visible;
+}
+.__react_component_tooltip.place-top::before {
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  bottom: -8px;
+  left: 50%;
+  margin-left: -10px;
+}
+.__react_component_tooltip.place-bottom::before {
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  top: -8px;
+  left: 50%;
+  margin-left: -10px;
+}
+.__react_component_tooltip.place-left::before {
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  right: -8px;
+  top: 50%;
+  margin-top: -5px;
+}
+.__react_component_tooltip.place-right::before {
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  left: -8px;
+  top: 50%;
+  margin-top: -5px;
+}
+.__react_component_tooltip .multi-line {
+  display: block;
+  padding: 2px 0;
+  text-align: center;
 }