fix(tooltip): update tooltip design and animation (#305)

#287

Author: rishichawda

lib/tooltip/theme.module.scss

@@ -7,16 +7,28 @@
 :local(.tip) {
   position: relative;
   cursor: pointer;
-  
+  filter: drop-shadow(1px 0px 2px rgba(0, 0, 0, 0.5));
 }
 
 :local(.tooltipContent) {
+  border-radius: 0.25em;
   background: $secondary-grey;
-  font-size: 14px;
+  font-size: 0.8em;
   position: absolute;
-  top: 20px;
-  padding: 3px 5px;
+  top: 1em;
+  padding: 0.5em;
   color: $original-white;
+  animation: scaleIn 0.2s;
+  @keyframes scaleIn {
+    0% {
+      transform: scale(0.1);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
   &:after {
     content: "";
       position: absolute;