icons

packages/website/src/components/Tooltip/index.module.css

@@ -5,9 +5,6 @@
     display: none;
 
     position: absolute;
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
 
     z-index: 1;
     background-color: var(--gray-12);
@@ -15,9 +12,24 @@
     border-radius: var(--space-3);
 
     padding: var(--space-2) var(--space-3);
-    margin-bottom: var(--space-3);
 
     white-space: nowrap;
+
+    &[data-side="top"] {
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+
+      margin-bottom: var(--space-3);
+    }
+
+    &[data-side="left"] {
+      top: 50%;
+      right: 100%;
+      transform: translateY(-50%);
+
+      margin-right: var(--space-3);
+    }
   }
 
   &:hover {

packages/website/src/components/Tooltip/index.tsx

@@ -4,12 +4,15 @@ import styles from "./index.module.css";
 interface Props {
   children: ReactNode;
   tooltip: string;
+  side?: "top" | "left";
 }
 
-export function Tooltip({ children, tooltip }: Props) {
+export function Tooltip({ children, tooltip, side = "top" }: Props) {
   return (
     <div className={styles.tooltip}>
-      <div className={styles.text}>{tooltip}</div>
+      <div className={styles.text} data-side={side}>
+        {tooltip}
+      </div>
       {children}
     </div>
   );