Implementation for Tooltip Component (#120)

src/packages/ToolTip/index.tsx

@@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react'
+import * as S from './styles'
+
+export type TooltipProps = {
+  children: ReactNode
+  content: ReactNode
+  position?: 'top' | 'bottom' | 'left' | 'right'
+}
+
+const Tooltip: React.FC<TooltipProps> = ({
+  children,
+  content,
+  position = 'top'
+}) => {
+  return (
+    <S.Wrapper>
+      {children}
+      <S.Content position={position}>{content}</S.Content>
+    </S.Wrapper>
+  )
+}
+
+export default Tooltip

src/packages/ToolTip/stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { StoryFn, Meta } from '@storybook/react'
+import Tooltip, { TooltipProps } from '.'
+
+export default {
+  title: 'Tooltip',
+  component: Tooltip,
+  args: {
+    children: 'Hover me',
+    content: 'Tooltip text here'
+  },
+  argTypes: {
+    position: {
+      control: {
+        type: 'select',
+        options: ['top', 'bottom', 'left', 'right']
+      }
+    }
+  }
+} as Meta
+
+export const Default: StoryFn<TooltipProps> = (args) => <Tooltip {...args} />
+
+// Separated stories for each position
+export const Top: StoryFn<TooltipProps> = (args) => (
+  <Tooltip {...args} position="top">
+    Top
+  </Tooltip>
+)
+
+export const Bottom: StoryFn<TooltipProps> = (args) => (
+  <Tooltip {...args} position="bottom">
+    Bottom
+  </Tooltip>
+)
+
+export const Left: StoryFn<TooltipProps> = (args) => (
+  <Tooltip {...args} position="left">
+    Left
+  </Tooltip>
+)
+
+export const Right: StoryFn<TooltipProps> = (args) => (
+  <Tooltip {...args} position="right">
+    Right
+  </Tooltip>
+)

src/packages/ToolTip/styles.ts

@@ -0,0 +1,51 @@
+import styled, { css } from 'styled-components'
+import { TooltipProps } from '.'
+
+export const Wrapper = styled.div`
+  position: relative;
+  display: inline-block;
+`
+
+export const Content = styled.span<Pick<TooltipProps, 'position'>>`
+  ${({ theme, position }) => css`
+    visibility: hidden;
+    max-width: calc(${theme.container.small} / 2);
+    background-color: ${theme.colors.base.black};
+    color: ${theme.colors.base.white};
+    text-align: center;
+    border-radius: ${theme.border.radius};
+    padding: ${theme.spacings.xsmall} ${theme.spacings.small};
+    position: absolute;
+    z-index: ${theme.layers.menu};
+
+    // Dynamic positioning based on the provided position prop
+    ${position === 'top' &&
+    css`
+      bottom: calc(100% + ${theme.spacings.xsmall});
+      left: 50%;
+      transform: translateX(-50%);
+    `}
+    ${position === 'bottom' &&
+    css`
+      top: calc(100% + ${theme.spacings.xsmall});
+      left: 50%;
+      transform: translateX(-50%);
+    `}
+    ${position === 'left' &&
+    css`
+      top: 50%;
+      right: calc(100% + ${theme.spacings.small});
+      transform: translateY(-50%);
+    `}
+    ${position === 'right' &&
+    css`
+      top: 50%;
+      left: calc(100% + ${theme.spacings.small});
+      transform: translateY(-50%);
+    `}
+
+    ${Wrapper}:hover & {
+      visibility: visible;
+    }
+  `}
+`