Added tooltip components (#24)

Co-authored-by: Renurose <renurose24022gmail.com>
Co-authored-by: ben-AI-cybersec <[email protected]>

src/components/Tooltip/Tooltip.stories.ts

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Tooltip } from './Tooltip';
+
+const meta: Meta<typeof Tooltip> = { title: 'Components/Tooltip', component: Tooltip,
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+const defaultProps = { text: 'Hover over me', tooltip: 'This is a tooltip',
+};
+
+export const Default: Story = { args: { ...defaultProps, },
+};
+

src/components/Tooltip/Tooltip.style.ts

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+export const TooltipContainer = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+
+export const TooltipText = styled.div`
+  visibility: hidden;
+  width: 120px;
+  background-color: ${({ theme }) => theme?.colors?.tooltipBg || '#555'};
+  color: ${({ theme }) => theme?.colors?.tooltipText || '#fff'};
+  text-align: center;
+  padding: ${({ theme }) => theme?.spacing?.xs || '5px'};
+  border-radius: ${({ theme }) => theme?.borderRadius?.sm || '6px'};
+  position: absolute;
+  z-index: 1;
+  bottom: 20%;
+  left: 50%;
+  margin-left: -60px;
+  opacity: 0;
+  transition: opacity 0.3s;
+  ${TooltipContainer}:hover & {
+    visibility: visible;
+    opacity: 1;
+  }
+`;

src/components/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react';
+import { Tooltip } from './Tooltip';
+import { axe } from 'jest-axe';
+
+describe('<Tooltip />', () => {
+	it('renders the tooltip component', () => {
+		const { getByText } = render(<Tooltip text="Hover over me" tooltip="Tooltip text" />);
+		expect(getByText('Hover over me')).toBeInTheDocument();
+	});
+
+	it('has no accessibility violations', async () => {
+		const { container } = render(<Tooltip text="Hover over me" tooltip="Tooltip text" />);
+		const results = await axe(container);
+
+		expect(results).toHaveNoViolations();
+	});
+});

src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { TooltipContainer, TooltipText } from './Tooltip.style';
+
+type TooltipProps = {
+  text: string;
+  tooltip: string;
+};
+
+export const Tooltip: FC<TooltipProps> = ({ text, tooltip }) => ( <TooltipContainer> {text} <TooltipText>{tooltip}</TooltipText> </TooltipContainer>
+);
+