1 files changed, 57 insertions, 0 deletions
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
new file mode 100644
index 0000000..5929c96
--- /dev/null
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -0,0 +1,57 @@
+import { ButtonHelp } from '@components/Buttons';
+import { useState } from 'react';
+import { useIntl } from 'react-intl';
+import styles from './Tooltip.module.scss';
+
+const Tooltip = ({
+  message,
+  title,
+}: {
+  message: string | string[];
+  title: string;
+}) => {
+  const intl = useIntl();
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const getMessageFromArray = (strings: string[]) => {
+    let keyIndex = 0;
+    return (
+      <ul>
+        {strings.map((string) => {
+          keyIndex = keyIndex + 1;
+          return <li key={`message-${keyIndex}`}>{string}</li>;
+        })}
+      </ul>
+    );
+  };
+
+  const buttonTitle = isOpen
+    ? intl.formatMessage({
+        defaultMessage: 'Close help',
+        description: 'Tooltip: button title',
+      })
+    : intl.formatMessage({
+        defaultMessage: 'Show help',
+        description: 'Tooltip: button title',
+      });
+
+  const wrapperModifier = isOpen ? styles.visible : styles.hidden;
+
+  return (
+    <div>
+      <ButtonHelp
+        showHelp={isOpen}
+        setShowHelp={setIsOpen}
+        title={buttonTitle}
+      />
+      <div className={`${styles.wrapper} ${wrapperModifier}`}>
+        <div className={styles.title}>{title}</div>
+        <div className={styles.message}>
+          {Array.isArray(message) ? getMessageFromArray(message) : message}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Tooltip;