From title attribute to model_title and :hover

app.py

@@ -397,6 +397,18 @@ tr.row_odd {
   font-weight: bolder;
 }
 
+.leaderboard-table td[model_title]:hover::after, .leaderboard-table-model-details td[model_title]:hover::after {
+  content: attr(model_title);
+  position: absolute;
+  background-color: rgba(50, 50, 50, 0.9);
+  color: white;
+  padding: 5px;
+  border-radius: 5px;
+  white-space: nowrap;
+  z-index: 10;
+  pointer-events: none;
+}
+
 """
 
 custom_js = """
@@ -413,15 +425,15 @@ function addTitleForEachCellOfLeaderboardTable(){
             // Get the value of the title attribute from the first link
             const titleText = firstCellLink.getAttribute('title');
 
-            // Set the title attribute for all cells in the row
-            row.querySelectorAll('td').forEach((cell, index) => {
-                // If the cell already has a title attribute, break the loop
-                if (cell.hasAttribute('title')) {
+            // Set the model_title attribute for all cells in the row
+            row.querySelectorAll('td').forEach(cell => {
+                // If the cell already has a model_title attribute, break the loop
+                if (cell.hasAttribute('model_title')) {
                     return; // Exit the current iteration for this row
                 }
                 
-                // Set the title attribute permanently
-                cell.setAttribute('title', titleText);
+                // Set the model_title attribute permanently
+                cell.setAttribute('model_title', titleText);
             });
         }
     });