diff --git a/core/static/core/style.scss b/core/static/core/style.scss
index 107126ec..634b9d4f 100644
--- a/core/static/core/style.scss
+++ b/core/static/core/style.scss
@@ -45,6 +45,35 @@ body {
   }
 }
 
+@mixin tooltip {
+  @include shadow;
+  z-index: 1;
+  pointer-events: none;
+  background-color: #333;
+  color: #fff;
+  border: 0.5px solid hsl(0, 0%, 50%);
+  border-radius: 5px;
+  padding: 5px 10px;
+  position: absolute;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 500ms ease-in;
+}
+
+.tooltip {
+  @include tooltip;
+  position: absolute;
+  width: max-content;
+
+  left: 0;
+  top: 0;
+}
+
+.tooltip[tooltip-status=open] {
+  opacity: 1;
+  transition: opacity 500ms ease-in;
+}
+
 .ib {
   display: inline-block;
   padding: 1px;
diff --git a/core/static/core/tooltips.scss b/core/static/core/tooltips.scss
index 3efce0ce..15e7f120 100644
--- a/core/static/core/tooltips.scss
+++ b/core/static/core/tooltips.scss
@@ -10,10 +10,9 @@
   border-radius: 5px;
   padding: 5px 10px;
   position: absolute;
-  white-space: nowrap;
   opacity: 0;
   transition: opacity 500ms ease-out;
-
+  width: max-content;
   white-space: normal;
 
   left: 0;