Merge pull request #4 from salino3/custom-tooltip

Custom tooltip
salino3 · Jun 16, 2024 · 7d240a1 · 7d240a1
2 parents c0ae751 + 7161796
commit 7d240a1
Show file tree

Hide file tree

Showing 10 changed files with 156 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -8,7 +8,12 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
     />
-
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+      crossorigin="anonymous"
+    />
     <title>My web React</title>
   </head>
   <body>

diff --git a/src/index.scss b/src/index.scss
@@ -1,7 +1,10 @@
+:host,
 :root {
   --color-one: #fafafa;
   --color-two: #112a46;
   --color-three: #acc8e5;
+  --color-four: #82a5ca;
+  --color-five: #5caafd;
 }
 
 html,
@@ -18,4 +21,5 @@ html {
 body {
   color: var(--color-two);
   background-color: var(--color-three);
+  font-family: "Times New Roman", Times, serif !important;
 }
diff --git a/src/pods/home/components/custom-tooltip/custom-tooltip.component.tsx b/src/pods/home/components/custom-tooltip/custom-tooltip.component.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import "./custom-tooltip.styles.scss";
+
+export const CustomTooltip: React.FC = () => {
+  interface TableData {
+    id: number;
+    name: string;
+    city: string;
+    email: string;
+  }
+
+  const mockTableData: TableData[] = [
+    {
+      id: 1,
+      name: "Mark",
+      city: "Berlin",
+      email: "[email protected]",
+    },
+    {
+      id: 2,
+      name: "Jacob",
+      city: "Madrid",
+      email: "[email protected]",
+    },
+    {
+      id: 3,
+      name: "Larry",
+      city: "London",
+      email: "[email protected]",
+    },
+  ];
+
+  return (
+    <div className="rootCustomTooltip">
+      <div className="containerTitle">
+        <h2>Custom Tooltip</h2>
+      </div>
+      <div className="containerTable">
+        <table className="table">
+          <thead>
+            <tr>
+              <th scope="col">#</th>
+              <th scope="col">Name</th>
+              <th scope="col">City</th>
+              <th className="lastThTitle" scope="col">
+                Email
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {mockTableData &&
+              mockTableData?.length > 0 &&
+              mockTableData.map((item) => (
+                <tr className="trTable" key={item?.id}>
+                  <th scope="row">{item?.id}</th>
+                  <th scope="row">
+                    {item?.name}
+                    <span>{item?.name}</span>
+                  </th>
+                  <th scope="row">
+                    {item?.city}
+
+                    <span>{item?.city}</span>
+                  </th>
+                  <th scope="row">
+                    {item?.email}
+                    <span>{item?.email}</span>
+                  </th>
+                </tr>
+              ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
diff --git a/src/pods/home/components/custom-tooltip/custom-tooltip.styles.scss b/src/pods/home/components/custom-tooltip/custom-tooltip.styles.scss
@@ -0,0 +1,58 @@
+.rootCustomTooltip {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 0.5rem;
+
+  .containerTable {
+    .table {
+      thead th:first-child {
+        border-radius: 12px 0 0 0 !important;
+      }
+
+      thead tr,
+      thead th,
+      thead td {
+        background-color: var(--color-four);
+        color: var(--color-two);
+        width: 200px;
+      }
+
+      thead tr th:last-child {
+        border-radius: 0 12px 0 0 !important;
+      }
+      tbody tr,
+      tbody th,
+      tbody td {
+        background-color: var(--color-three);
+        color: var(--color-two);
+        width: 200px;
+      }
+      .trTable:hover th {
+        background-color: var(--color-five);
+      }
+
+      //
+      th span {
+        display: none;
+      }
+      tbody th {
+        position: relative;
+      }
+
+      tbody th:hover span {
+        position: absolute;
+        box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
+          rgba(0, 0, 0, 0.22) 0px 15px 12px;
+        display: block;
+        padding: 0.5rem;
+        border-radius: 12px;
+        background-color: var(--color-one);
+        top: -10px;
+        right: 10px;
+      }
+    }
+  }
+}
diff --git a/src/pods/home/components/custom-tooltip/index.ts b/src/pods/home/components/custom-tooltip/index.ts
@@ -0,0 +1 @@
+export * from "./custom-tooltip.component";
diff --git a/src/pods/home/components/image-rotate/rotate-image.styles.scss b/src/pods/home/components/image-rotate/rotate-image.styles.scss
@@ -14,6 +14,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  margin-top: 0.5rem;
 
   .container {
     display: flex;

diff --git a/src/pods/home/components/index.ts b/src/pods/home/components/index.ts
@@ -1,2 +1,3 @@
 export * from "./image-rotate";
 export * from "./input-text";
+export * from "./custom-tooltip";
diff --git a/src/pods/home/components/input-text/input-text.component.tsx b/src/pods/home/components/input-text/input-text.component.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import "./input-text.styles.scss";
 
 export const CustomInputText: React.FC = () => {
-  const [inputValue, setInputValue] = useState("");
+  const [inputValue, setInputValue] = useState<string>("");
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(event.target.value);

diff --git a/src/pods/home/components/input-text/input-text.styles.scss b/src/pods/home/components/input-text/input-text.styles.scss
@@ -4,6 +4,7 @@
   justify-content: center;
   align-items: center;
   gap: 1rem;
+  margin-top: 0.5rem;
 
   .containerInput {
     position: relative;

diff --git a/src/pods/home/home.component.tsx b/src/pods/home/home.component.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { CustomInputText, RotateImage } from "./components";
+import { CustomInputText, CustomTooltip, RotateImage } from "./components";
 import "./home.styles.scss";
 
 export const HomePage: React.FC = () => {
@@ -46,6 +46,12 @@ export const HomePage: React.FC = () => {
           <div className="containerInput">
             <CustomInputText />
           </div>
+        </details>{" "}
+        <details>
+          <summary>Custom Tooltip</summary>
+          <div className="containerInput">
+            <CustomTooltip />
+          </div>
         </details>
       </div>
     </div>