tooltips now fully styled, appearing above applet container to avoid clipping issues; new methods added to apps.lyric.models.Token

src/static_src/scss/_gameboard.scss

@@ -41,35 +41,29 @@ body.page-gameboard {
     }
 }
 
-#id_game_applets_container {
-    #id_applet_game_kit {
+#id_applet_game_kit {
+    display: flex;
+    flex-direction: column;
+
+    #id_game_kit {
+        flex: 1;
+        position: relative;
         display: flex;
-        flex-direction: column;
-        overflow: visible;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-evenly;
+        overflow-x: visible;
+        scrollbar-width: none;
+        &::-webkit-scrollbar { display: none; }
 
-        #id_game_kit {
-            flex: 1;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: space-evenly;
-            overflow-x: visible;
-            scrollbar-width: none;
-            &::-webkit-scrollbar { display: none; }
+        .token { position: static; }
 
-            .token-tooltip {
-                z-index: 1000;
-            }
+        .token:hover .token-tooltip { display: none; }
 
-            .token,
-            .kit-item {
-                font-size: 1.5rem;
-            }
+        .token,
+        .kit-item { font-size: 1.5rem; }
 
-            .kit-item {
-                opacity: 0.6;
-            }
-        }
+        .kit-item { opacity: 0.6; }
     }
 }
 
@@ -94,6 +88,13 @@ body.page-gameboard {
     }
 }
 
+#id_tooltip_portal {
+    position: fixed;
+    z-index: 9999;
+
+    &.active { display: block; }
+}
+
 @media (max-height: 500px) {
     body.page-gameboard {
         .container {

src/static_src/scss/_wallet-tokens.scss

@@ -1,3 +1,38 @@
+.token-tooltip {
+    display: none;
+    width: 16rem;
+    max-width: 16rem;
+    white-space: normal;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(6px);
+    border: 0.1rem solid rgba(var(--secUser), 0.5);
+    color: rgba(var(--secUser), 1);
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.5rem;
+    z-index: 10;
+    font-size: 0.875rem;
+
+    h4 {
+        font-size: 0.95rem;
+        margin: 0 0 0.3rem 0;
+        color: rgba(var(--terUser), 1);
+    }
+
+    p {
+        margin: 0 0 0.2rem 0;
+
+        &.expiry {
+            color: rgba(var(--priRd), 1);
+        }
+    }
+
+    small {
+        display: block;
+        font-size: 0.6rem;
+        opacity: 0.6;
+    }
+}
+
 .token {
     position: relative;
     display: inline-block;
@@ -5,23 +40,13 @@
     color: rgba(var(--terUser), 1);
 
     .token-tooltip {
-        display: none;
         position: absolute;
         bottom: 125%;
-        left: 0;
-        width: 16rem;
-        max-width: 16rem;
-        white-space: normal;
-        background-color: rgba(var(--priUser), 0.95);
-        border: 0.1rem solid rgba(var(--secUser), 0.5);
-        color: rgba(var(--secUser), 1);
-        padding: 0.5rem 0.75rem;
-        border-radius: 0.5rem;
-        z-index: 10;
-        font-size: 0.875rem;
+        left: 50%;
+        transform: translateX(-50%);
     }
 
     &:hover .token-tooltip {
         display: block;
     }
-}
+}