tooltip component

Author: jmgrd98

src/components/molecules/Modal/Modal.stories.tsx

@@ -20,6 +20,7 @@ const meta: Meta<typeof Modal> = {
             </div>
         ),
     ],
+    tags: ['autodocss']
 };
 
 export default meta;

src/components/molecules/Modal/Modal.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, ReactNode, CSSProperties } from "react";
 import Card from "../Card/Card";
+import { IoClose } from "react-icons/io5";
 
 export type ModalProps = {
     isOpen: boolean;
@@ -38,7 +39,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(({
                     onClick={onClose}
                     className="absolute top-2 right-2 text-gray-700 hover:text-gray-900"
                 >
-                    ✖
+                    <IoClose className="h-6 w-6" />
                 </button>
                 {children}
             </Card>

src/components/molecules/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,93 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Tooltip, { TooltipProps } from './Tooltip';
+import { Text } from '../../atoms/Text/Text';
+import Button from '../../atoms/Button/Button';
+
+const meta: Meta<typeof Tooltip> = {
+    title: 'Components/Molecules/Tooltip',
+    component: Tooltip,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        position: {
+            control: {
+                type: 'select',
+                options: ['top', 'right', 'bottom', 'left'],
+            },
+        },
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                <Story />
+            </div>
+        ),
+    ],
+    tags: ['autodocs'],
+};
+
+export default meta;
+type TooltipStory = StoryObj<TooltipProps>;
+
+export const Top: TooltipStory = (args: any) => (
+    <Tooltip {...args} className='bg-green-500 text-white w-[200px] max-h-[200px]' content={
+        <>
+            <Text size="sm">This is some description text in the tooltip.</Text>
+        </>
+    }>
+        <Button label={'Hover me'} className="bg-blue-500 hover:bg-blue-600 text-white mb-4" />
+    </Tooltip>
+);
+
+Top.args = {
+    position: 'top',
+};
+
+export const Right: TooltipStory = (args: any) => (
+    <Tooltip {...args} content={
+        <>
+            <Text size="base" weight="bold" className="mb-2">Tooltip Title</Text>
+            <Text size="sm">This is some description text in the tooltip.</Text>
+            <Button variant="solid" size="sm" backgroundColor="#4CAF50" label="Click Me" className="mt-2" />
+        </>
+    }>
+        <Button label={'Hover me'} className="bg-blue-500 hover:bg-blue-600 text-white mb-4" />
+    </Tooltip>
+);
+
+Right.args = {
+    position: 'right',
+};
+
+export const Bottom: TooltipStory = (args: any) => (
+    <Tooltip {...args} content={
+        <>
+            <Text size="base" weight="bold" className="mb-2">Tooltip Title</Text>
+            <Text size="sm">This is some description text in the tooltip.</Text>
+            <Button variant="solid" size="sm" backgroundColor="#4CAF50" label="Click Me" className="mt-2" />
+        </>
+    }>
+        <Button label={'Hover me'} className="bg-blue-500 hover:bg-blue-600 text-white mb-4" />
+    </Tooltip>
+);
+
+Bottom.args = {
+    position: 'bottom',
+};
+
+export const Left: TooltipStory = (args: any) => (
+    <Tooltip {...args} content={
+        <>
+            <Text size="base" weight="bold" className="mb-2">Tooltip Title</Text>
+            <Text size="sm">This is some description text in the tooltip.</Text>
+            <Button variant="solid" size="sm" backgroundColor="#4CAF50" label="Click Me" className="mt-2" />
+        </>
+    }>
+        <Button label={'Hover me'} className="bg-blue-500 hover:bg-blue-600 text-white mb-4" />
+    </Tooltip>
+);
+
+Left.args = {
+    position: 'left',
+};

src/components/molecules/Tooltip/Tooltip.tsx

@@ -0,0 +1,41 @@
+import { ReactNode, useState } from "react";
+import { cn } from "../../../utils";
+
+export type TooltipProps = {
+    content: ReactNode;
+    position?: 'top' | 'right' | 'bottom' | 'left';
+    className?: string;
+    children: ReactNode;
+};
+
+const Tooltip = ({ content, position = 'top', className, children }: TooltipProps) => {
+    const [isVisible, setIsVisible] = useState(false);
+
+    return (
+        <div className="relative inline-block">
+            <div
+                onMouseEnter={() => setIsVisible(true)}
+                onMouseLeave={() => setIsVisible(false)}
+                className="cursor-pointer"
+            >
+                {children}
+            </div>
+            {isVisible && (
+                <div
+                    className={cn(
+                        "absolute z-10 p-2 text-sm rounded shadow-lg transition-opacity duration-300",
+                        position === 'top' && 'bottom-full left-1/2 transform -translate-x-1/2 mb-2',
+                        position === 'right' && 'left-full top-1/2 transform -translate-y-1/2 ml-2',
+                        position === 'bottom' && 'top-full left-1/2 transform -translate-x-1/2 mt-2',
+                        position === 'left' && 'right-full top-1/2 transform -translate-y-1/2 mr-2',
+                        className
+                    )}
+                >
+                    {content}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default Tooltip;