Add descriptive popovers on hover

diff --git a/index.html b/index.html
index ff2c5f383fa91094cb7bef3486afaca38a6ec7ad..263aeb3bb2491060f6647d680d6c24448548b82f 100644 (file)
--- 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 e6455fee7e929030aeaa28aad0faad49f60eabf4..39a0e940328f7abe9fa449a7a07c125b39257799 100644 (file)
--- 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 53415b334231e02a42a5c8bf36cef8fc4be7669b..3c9e277a6d2efc033bd0997a8b4beb06a8100dae 100644 (file)
--- a/style.css
+++ b/style.css
@@ -52,6 +52,7 @@ div#visualizations {
   gap: 8px;
   flex-wrap: wrap;
   justify-content: center;
+  isolation: isolate;
 }
 
 a {