8 files changed, 169 insertions, 2 deletions
diff --git a/src/components/molecules/layout/modal.module.scss b/src/components/molecules/modals/modal.module.scss
index 2fff562..2fff562 100644
--- a/src/components/molecules/layout/modal.module.scss
+++ b/src/components/molecules/modals/modal.module.scss
diff --git a/src/components/molecules/layout/modal.stories.tsx b/src/components/molecules/modals/modal.stories.tsx
index 396e89e..b68a24b 100644
--- a/src/components/molecules/layout/modal.stories.tsx
+++ b/src/components/molecules/modals/modal.stories.tsx
@@ -1,9 +1,8 @@
-import Cog from '@components/atoms/icons/cog';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import ModalComponent from './modal';
 
 export default {
-  title: 'Molecules/Layout',
+  title: 'Molecules/Modals',
   component: ModalComponent,
   argTypes: {
     children: {
diff --git a/src/components/molecules/layout/modal.test.tsx b/src/components/molecules/modals/modal.test.tsx
index 14fb224..14fb224 100644
--- a/src/components/molecules/layout/modal.test.tsx
+++ b/src/components/molecules/modals/modal.test.tsx
diff --git a/src/components/molecules/layout/modal.tsx b/src/components/molecules/modals/modal.tsx
index 4dc3b0a..4dc3b0a 100644
--- a/src/components/molecules/layout/modal.tsx
+++ b/src/components/molecules/modals/modal.tsx
diff --git a/src/components/molecules/modals/tooltip.module.scss b/src/components/molecules/modals/tooltip.module.scss
new file mode 100644
index 0000000..94aa3dd
--- /dev/null
+++ b/src/components/molecules/modals/tooltip.module.scss
@@ -0,0 +1,46 @@
+@use "@styles/abstracts/functions" as fun;
+
+.wrapper {
+  --title-height: #{fun.convert-px(40)};
+
+  margin-top: calc(var(--title-height) / 2);
+  padding: calc((var(--title-height) / 2) + var(--spacing-sm)) var(--spacing-sm)
+    var(--spacing-sm);
+  position: relative;
+  background: var(--color-bg);
+  border: fun.convert-px(2) solid var(--color-primary-dark);
+  border-radius: fun.convert-px(3);
+  box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow),
+    fun.convert-px(2) fun.convert-px(2) fun.convert-px(1) fun.convert-px(1)
+      var(--color-shadow-light);
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  height: var(--title-height);
+  padding-right: var(--spacing-xs);
+  position: absolute;
+  top: calc(var(--title-height) / -2);
+  left: var(--spacing-xs);
+  background: var(--color-bg);
+  border: fun.convert-px(1) solid var(--color-primary-dark);
+  box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow);
+  color: var(--color-primary-darker);
+  font-size: var(--font-size-sm);
+  font-variant: small-caps;
+  font-weight: 500;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  height: var(--title-height);
+  margin-right: var(--spacing-xs);
+  padding: 0 var(--spacing-2xs);
+  background: var(--color-primary-dark);
+  border: fun.convert-px(1) solid var(--color-primary-dark);
+  box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow);
+  color: var(--color-fg-inverted);
+  font-weight: 600;
+}
diff --git a/src/components/molecules/modals/tooltip.stories.tsx b/src/components/molecules/modals/tooltip.stories.tsx
new file mode 100644
index 0000000..a57cf34
--- /dev/null
+++ b/src/components/molecules/modals/tooltip.stories.tsx
@@ -0,0 +1,41 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import TooltipComponent from './tooltip';
+
+export default {
+  title: 'Molecules/Modals',
+  component: TooltipComponent,
+  argTypes: {
+    content: {
+      control: {
+        type: 'text',
+      },
+      description: 'The tooltip body.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    title: {
+      control: {
+        type: 'text',
+      },
+      description: 'The tooltip title',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof TooltipComponent>;
+
+const Template: ComponentStory<typeof TooltipComponent> = (args) => (
+  <TooltipComponent {...args} />
+);
+
+export const Tooltip = Template.bind({});
+Tooltip.args = {
+  content:
+    'Minima tempora fuga omnis ratione doloribus ut. Totam ea vitae consequatur. Fuga hic ipsum. In non debitis ex assumenda ut dicta. Sit ut maxime eligendi est.',
+  icon: '?',
+  title: 'Laborum enim vero',
+};
diff --git a/src/components/molecules/modals/tooltip.test.tsx b/src/components/molecules/modals/tooltip.test.tsx
new file mode 100644
index 0000000..24f20d8
--- /dev/null
+++ b/src/components/molecules/modals/tooltip.test.tsx
@@ -0,0 +1,24 @@
+import { render, screen } from '@test-utils';
+import Tooltip from './tooltip';
+
+const title = 'Illum eum at';
+const content =
+  'Non accusantium ad. Est et impedit iste animi voluptas cum accusamus accusantium. Repellat ut sint pariatur cumque cupiditate. Animi occaecati odio ut debitis ipsam similique. Repudiandae aut earum occaecati consequatur laborum ut nobis iusto. Adipisci laboriosam id.';
+const icon = '?';
+
+describe('Tooltip', () => {
+  it('renders a title', () => {
+    render(<Tooltip title={title} content={content} icon={icon} />);
+    expect(screen.getByText(title)).toBeInTheDocument();
+  });
+
+  it('renders an explanation', () => {
+    render(<Tooltip title={title} content={content} icon={icon} />);
+    expect(screen.getByText(content)).toBeInTheDocument();
+  });
+
+  it('renders an icon', () => {
+    render(<Tooltip title={title} content={content} icon={icon} />);
+    expect(screen.getByText(icon)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/molecules/modals/tooltip.tsx b/src/components/molecules/modals/tooltip.tsx
new file mode 100644
index 0000000..ceb0b14
--- /dev/null
+++ b/src/components/molecules/modals/tooltip.tsx
@@ -0,0 +1,57 @@
+import List, { type ListItem } from '@components/atoms/lists/list';
+import { FC, ReactNode } from 'react';
+import styles from './tooltip.module.scss';
+
+export type TooltipProps = {
+  /**
+   * Set additional classes to the tooltip wrapper.
+   */
+  classes?: string;
+  /**
+   * The tooltip body.
+   */
+  content: string | string[];
+  /**
+   * An icon to illustrate tooltip content.
+   */
+  icon: ReactNode;
+  /**
+   * The tooltip title.
+   */
+  title: string;
+};
+
+/**
+ * Tooltip component
+ *
+ * Render a tooltip modal.
+ */
+const Tooltip: FC<TooltipProps> = ({ classes = '', content, icon, title }) => {
+  /**
+   * Format an array of strings to an array of object with id and value.
+   *
+   * @param {string[]} array - An array of strings.
+   * @returns {ListItem[]} The array formatted to be used as list items.
+   */
+  const getListItems = (array: string[]): ListItem[] => {
+    return array.map((string, index) => {
+      return { id: `item-${index}`, value: string };
+    });
+  };
+
+  return (
+    <div className={`${styles.wrapper} ${classes}`}>
+      <div className={styles.title}>
+        <span className={styles.icon}>{icon}</span>
+        {title}
+      </div>
+      {Array.isArray(content) ? (
+        <List items={getListItems(content)} />
+      ) : (
+        content
+      )}
+    </div>
+  );
+};
+
+export default Tooltip;