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 {