From: Ardis Lu <ardisglu@gmail.com>
Date: Sat, 26 Aug 2023 05:03:01 +0000 (-0700)
Subject: Add descriptive popovers on hover
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=3c6624a70e5b63fa8b4b6202f71b87e8f6fb7bb8;p=utf-8-visualizer

Add descriptive popovers on hover
---

diff --git a/index.html b/index.html
index ff2c5f3..263aeb3 100644
--- a/index.html
+++ b/index.html
@@ -51,6 +51,8 @@
         padding: 4px;
         animation: 800ms fadeIn both;
         transition: filter 800ms;
+        --index-order: 1;
+        z-index: calc(var(--index-order) * var(--i));
       }
 
       :host(:hover),
@@ -63,19 +65,65 @@
         animation-name: slideIn, fadeIn;
         animation-duration: 800ms, 1600ms;
         animation-fill-mode: both;
+        position: relative;
+      }
+
+      ::slotted(*)::after {
+        position: absolute;
+        left: 50%;
+        transform: translate(-50%, calc(-100% - 4px));
+        inline-size: max-content;
+        pointer-events: none;
+        padding: 4px;
+        border-radius: 4px;
+        background: hsl(216deg 50% 40% / 90%);
+        opacity: 0;
+        transition: opacity 400ms;
+      }
+
+      @media (min-width: 1440px) {
+        :host {
+          --index-order: -1;
+        }
+
+        ::slotted(*)::after {
+          left: unset;
+          transform: translate(8px, -4px);
+        }
+      }
+
+      ::slotted(*:hover)::after {
+        opacity: 1;
+      }
+
+      ::slotted([slot="char"])::after {
+        content: "Visualization";
+        transition: opacity 200ms;
       }
 
       ::slotted([slot="point"]) {
         animation-delay: 100ms;
       }
 
+      ::slotted([slot="point"])::after {
+        content: "Codepoint (hex)";
+      }
+
       ::slotted([slot="point-binary"]) {
         animation-delay: 200ms;
       }
 
+      ::slotted([slot="point-binary"])::after {
+        content: "Codepoint (binary)"
+      }
+
       ::slotted([slot="bytes"]) {
         animation-delay: 300ms;
       }
+
+      ::slotted([slot="bytes"])::after {
+        content: "UTF-8"
+      }
     </style>
 
     <slot name="char"></slot>
diff --git a/script.js b/script.js
index e6455fe..39a0e94 100644
--- a/script.js
+++ b/script.js
@@ -74,6 +74,7 @@ function render(output) {
   const vizContainer = document.getElementById('visualizations');
   vizContainer.innerHTML = '';
 
+  let i = 1;
   for (const item of output) {
     const viz = document.createElement('al-point-visualization');
     viz.insertAdjacentHTML('beforeend', `<span slot="char">${item.char}</span>`);
@@ -83,6 +84,11 @@ function render(output) {
     viz.insertAdjacentHTML('beforeend', `<span slot="point-binary">${pointBinary}</span>`);
     viz.insertAdjacentHTML('beforeend', `<span slot="bytes">${bytes}</span>`);
 
+    // Set a CSS variable to dynamically switch z-index stacking order
+    // when required, so the hover popovers stay on top.
+    viz.style.setProperty('--i', i);
+    i++;
+
     vizContainer.insertAdjacentElement('beforeend', viz);
   }
 }
diff --git a/style.css b/style.css
index 53415b3..3c9e277 100644
--- a/style.css
+++ b/style.css
@@ -52,6 +52,7 @@ div#visualizations {
   gap: 8px;
   flex-wrap: wrap;
   justify-content: center;
+  isolation: isolate;
 }
 
 a {