perf: new tooltip and fix background on/off hot reload

src/components/helpers/tooltip/Tooltip.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import './tooltip.scss';
+
+export default function Tooltip(props) {
+  return (
+    <div className='tooltip'>
+      {props.children}
+      <span className='tooltipTitle'>{props.title}</span>
+    </div>
+  );
+}

src/components/helpers/tooltip/tooltip.scss

@@ -0,0 +1,28 @@
+// todo: possibly add tooltip placement option
+.tooltip {
+  position: relative;
+  display: inline-block;
+
+  .tooltipTitle {
+    width: 60px;
+    background-color: #000000;
+    color: #ffffff;
+    text-align: center;
+    font-size: 0.6rem;
+    border-radius: 6px;
+    padding: 5px 0;
+    position: absolute;
+    z-index: 1;
+    top: 100%;
+    left: 50%;
+    margin-left: -30px;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.8s;
+  }
+}
+
+.tooltip:hover .tooltipTitle {
+  visibility: visible;
+  opacity: 1;
+}