changes

app/assets/styles/main.scss

@@ -25,3 +25,40 @@
     }
   }
 }
+
+// Tooltip Styles
+.tooltiptext {
+  visibility: hidden;
+  opacity: 0;
+  background-color: var(--bulma-primary-95);
+  color: var(--bulma-primary-bold);
+  border-radius: 6px;
+  position: absolute;
+  margin-left: 0px;
+  z-index: 999;
+  bottom: 110%;
+  transition: opacity 0.3s;
+  padding: 6px 9px;
+  font-size: 13px;
+  pointer-events: none;
+  box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1);
+}
+
+.to-left {
+  right: 30px;
+}
+
+@mixin tooltipshow() {
+  visibility: visible;
+  opacity: 1;
+  position: absolute;
+  min-width: 300px;
+  z-index: 999;
+}
+
+.control:hover .tooltiptext {
+  @include tooltipshow();
+}
+.control:hover .tooltiptext .to-left {
+  @include tooltipshow();
+}