feat(SW-350): Implemented tooltip and booking widget tablet design

components/TempDesignSystem/Tooltip/index.tsx

@@ -0,0 +1,30 @@
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import { tooltipVariants } from "./variants"
+
+import styles from "./tooltip.module.css"
+
+import { TooltipPosition, TooltipProps } from "@/types/components/tooltip"
+
+export function Tooltip<P extends TooltipPosition>({
+  heading,
+  text,
+  position,
+  arrow,
+  children,
+}: TooltipProps<P>) {
+  const className = tooltipVariants({ position, arrow })
+  return (
+    <div className={styles.tooltipContainer} role="tooltip" aria-label={text}>
+      <div className={className}>
+        {heading && (
+          <Caption textTransform="bold" color="white">
+            {heading}
+          </Caption>
+        )}
+        {text && <Caption color="white">{text}</Caption>}
+      </div>
+      {children}
+    </div>
+  )
+}