Fix rad-ui#577: [New Feature] Added Multiple direction support for To…

…oltip rad-ui#577

src/components/tools/Popper/Popper.tsx

@@ -21,7 +21,19 @@ export type PopperProps = {
     customRootClass?: string;
     activationStrategy?: 'hover';
     className?: string;
-    placement?: 'top' | 'bottom' | 'bottom-start'; // TODO: fix
+    placement?:
+        | 'top'
+        | 'bottom'
+        | 'left'
+        | 'right'
+        | 'top-start'
+        | 'top-end'
+        | 'bottom-start'
+        | 'bottom-end'
+        | 'left-start'
+        | 'left-end'
+        | 'right-start'
+        | 'right-end'; 
     children?: React.ReactNode; // TODO: fix
     open?: boolean;
     hoverDelay?: number;

src/components/ui/Tooltip/Tooltip.tsx

@@ -1,19 +1,40 @@
 import React from 'react';
-
 import Popper from '~/components/tools/Popper/Popper';
 
 const COMPONENT_NAME = 'Tooltip';
 
 type TooltipProps = {
     children: React.ReactNode;
     label: string;
+    placement?: 
+        | 'top' 
+        | 'bottom' 
+        | 'left' 
+        | 'right' 
+        | 'top-start' 
+        | 'top-end' 
+        | 'bottom-start' 
+        | 'bottom-end' 
+        | 'left-start' 
+        | 'left-end' 
+        | 'right-start' 
+        | 'right-end';
     [key: string]: any;
 };
 
-const Tooltip = ({ children, label, ...props }:TooltipProps) => {
-    return <div>
-        <Popper popperName={COMPONENT_NAME} pop={'hello'} {...props}>{children}</Popper>
-    </div>;
+const Tooltip = ({ children, label="hello", placement = 'top', ...props }: TooltipProps) => {
+    return (
+        <div>
+            <Popper
+                popperName={COMPONENT_NAME}
+                pop={label} 
+                placement={placement} 
+                {...props}
+            >
+                {children}
+            </Popper>
+        </div>
+    );
 };
 
 export default Tooltip;

src/components/ui/Tooltip/stories/Tooltip.stories.js

@@ -8,7 +8,7 @@ export default {
     component: Tooltip,
     render: (args) => <SandboxEditor>
         <ScrollPlayground>
-            <Tooltip className="text-gray-1000" label="This is a tooltip">
+            <Tooltip className="text-gray-1000" label="This is a tooltip" placement='left'>
                     Hello, hover me!
             </Tooltip>
         </ScrollPlayground>