Use tippy for tooltips

public/scripts/upload.js

@@ -365,6 +365,13 @@ function updateFileListItem(itemNode, imageUpload) {
   }
 }
 
+function handleColorPickersTooltip() {
+  tippy("[data-tippy-content]", {
+    placement: "bottom-end",
+    theme: "light-border",
+  });
+}
+
 function main() {
   const htmlNode = document.querySelector("html");
   const uploadSection = document.querySelector("#above-file-uploaded");
@@ -378,6 +385,8 @@ function main() {
     ".generating-modal-dialog__cancel-btn",
   );
 
+  handleColorPickersTooltip();
+
   const fileListViewModel = new FileListViewModel(MAX_FILE_SIZE_BYTE);
   const viewModel = new RootViewModel(MAX_MOCKUP_WAIT_SEC, fileListViewModel);
 

src/layouts/BaseLayout.astro

@@ -39,6 +39,10 @@ const social_icon = "/Images/mockuphone-logo.png";
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
     />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/tippy.js@6/themes/light-border.css"
+    />
 
     <script type="text/javascript" src="/scripts/jquery/jquery-1.10.2.min.js"
     ></script>
@@ -56,6 +60,9 @@ const social_icon = "/Images/mockuphone-logo.png";
       defer
       data-domain="mockuphone.com"
       src="https://plausible.io/js/plausible.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/@popperjs/core@2"
+    ></script>
+    <script type="text/javascript" src="https://unpkg.com/tippy.js@6"></script>
     <script type="text/javascript" src="/scripts/main.js"></script>
     <!-- ${ self.javascript() } -->
 

src/pages/model/[model]/color/[color].astro

@@ -159,9 +159,8 @@ if (deviceDetail == null) {
                         ? "color-picker-item--selected"
                         : ""
                     }`}
-                  >
-                    <div class="color-picker-item__tooltip">{d.color.name}</div>
-                  </a>
+                    data-tippy-content={d.color.name}
+                  />
                 </li>
               ))
             }

src/styles/upload.css

@@ -397,12 +397,10 @@ main {
   overflow-y: hidden;
   -ms-overflow-style: none;
   scrollbar-width: none;
-  padding-inline-start: 0;
   justify-content: center;
 }
 
 .color-picker-item {
-  position: relative;
   width: 30px;
   height: 30px;
   border: 3px white solid;
@@ -436,34 +434,6 @@ main {
   margin-left: 18px;
 }
 
-.color-picker-item .color-picker-item__tooltip {
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 0.3s;
-
-  background-color: white;
-
-  padding: 4px 8px;
-  border-radius: 4px;
-  border: 1px #e7e7e7 solid;
-
-  color: black;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 18.5px;
-  text-align: center;
-  text-wrap: nowrap;
-
-  position: absolute;
-  z-index: 1;
-  top: 45px;
-  left: 30px;
-}
-.color-picker-item:hover .color-picker-item__tooltip {
-  visibility: visible;
-  opacity: 1;
-}
-
 .generate-btn {
   margin: 20px 0 0 0;
   padding: 8px 50px;