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

src/apps/gameboard/static/apps/gameboard/gameboard.js

@@ -0,0 +1,24 @@
+function initGameKitTooltips() {
+    const portal = document.getElementById('id_tooltip_portal');
+    if (!portal) return;
+
+    document.querySelectorAll('#id_game_kit .token').forEach(token => {
+        const tooltip = token.querySelector('.token-tooltip');
+        if (!tooltip) return;
+
+        token.addEventListener('mouseenter', () => {
+            const rect = token.getBoundingClientRect();
+            portal.innerHTML = tooltip.innerHTML;
+            portal.style.left = Math.round(rect.left + rect.width / 2) + 'px';
+            portal.style.top = Math.round(rect.top) + 'px';
+            portal.style.transform = 'translate(-50%, calc(-100% - 0.5rem))';
+            portal.classList.add('active');
+        });
+
+        token.addEventListener('mouseleave', () => {
+            portal.classList.remove('active');
+        });
+    });
+}
+
+document.addEventListener('DOMContentLoaded', initGameKitTooltips);

src/apps/lyric/models.py

@@ -65,20 +65,33 @@ class Token(models.Model):
     token_type = models.CharField(max_length=8, choices=TOKEN_TYPE_CHOICES)
     expires_at = models.DateTimeField(null=True, blank=True)
 
-    def tooltip_text(self):
-        if self.token_type == self.COIN:
-            return (
-                "Coin-on-a-String: Admit 1 Entry"
-                " (and another after that, and another after that\u2026)"
-                " \u2014 no expiry"
-            )
-        if self.token_type == self.FREE:
-            return (
-                f"Free Token: Admit 1 Entry"
-                f" \u2014 Expires {self.expires_at.strftime('%Y-%m-%d')}"
-            )
+    def tooltip_name(self):
         return self.get_token_type_display()
     
+    def tooltip_description(self):
+        if self.token_type in (self.COIN, self.FREE):
+            return "Admit 1 Entry"
+        return ""
+
+    def tooltip_expiry(self):
+        if self.token_type == self.COIN:
+            return "no expiry"
+        if self.expires_at:
+            return f"Expires {self.expires_at.strftime('%Y-%m-%d')}"
+        return ""
+
+    def tooltip_shoptalk(self):
+        if self.token_type == self.COIN:
+            return "\u2026and another after that, and another after that\u2026"
+        return None
+
+    def tooltip_text(self):
+        text = f"{self.tooltip_name()}: {self.tooltip_description()}"
+        if self.tooltip_shoptalk():
+            text += f" ({self.tooltip_shoptalk()})"
+        text += f" \u2014 {self.tooltip_expiry()}"
+        return text
+    
 class PaymentMethod(models.Model):
     user = models.ForeignKey(User, on_delete=models.CASCADE, related_name="payment_methods")
     stripe_pm_id = models.CharField(max_length=255)