Implement color picker item tooltip on hover

oursky · May 27, 2024 · bdedcf8 · bdedcf8
2 parents b682545 + ce2b940
commit bdedcf8
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/src/pages/model/[model]/color/[color].astro b/src/pages/model/[model]/color/[color].astro
@@ -157,7 +157,9 @@ if (deviceDetail == null) {
                         ? "color-picker-item--selected"
                         : ""
                     }`}
-                  />
+                  >
+                    <div class="color-picker-item__tooltip">{d.color.name}</div>
+                  </a>
                 </li>
               ))
             }

diff --git a/src/styles/upload.css b/src/styles/upload.css
@@ -396,6 +396,7 @@ main {
 }
 
 .color-picker-item {
+  position: relative;
   width: 30px;
   height: 30px;
   border: 3px white solid;
@@ -436,6 +437,34 @@ 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;
-Original file line number
+Diff line change
@@ Expand Up / @@ -157,7 +157,9 @@ if (deviceDetail == null) { @@
                             ? "color-picker-item--selected"
                             : ""
                         }`}
-                      />
+                      >
+                        <div class="color-picker-item__tooltip">{d.color.name}</div>
+                      </a>
                     </li>
                   ))
                 }
@@ Expand Down @@