Add hover tooltips to benchmark table column headers by stirby · Pull Request #20 · coder/balatrobench

stirby · 2026-02-05T14:53:53Z

Summary

Adds hover tooltips to benchmark table column headers for improved readability. Users can now see explanations for each metric by hovering over the column header icons, without needing to visit the about page.

Changes

Added pure CSS tooltip styles to both index.html and community.html
Tooltips appear below the column headers on hover (avoids viewport clipping)
Dark mode support with inverted tooltip colors
Uses cursor: help to indicate interactive help is available

Tooltip Text (matches About page)

Column	Tooltip
Round	Average round reached by playing the game
✅🔧	Responses with valid tool calls that can be executed in the current game state
⚠️🔧	Responses with valid tool calls that cannot be executed in the current game state
🔴🔧	Responses without valid tool calls
In 🪙/🔧	Average input tokens per tool call
Out 🪙/🔧	Average output tokens per tool call (including reasoning tokens)
🕐/🔧	Average time per tool call in seconds
💲/🔧	Average cost per tool call in milli-dollars

Testing

Run make serve
Hover over any column header icon in the benchmark table
Verify tooltip appears below with correct text
Test in both light and dark modes

- Add pure CSS tooltip styles to both index.html and community.html - Tooltips display on hover over column header icons - Text mirrors explanations from about page: - Round: Average round reached by playing the game - Success tool: Responses with valid tool calls that can be executed - Failed tool: Responses with valid tool calls that cannot be executed - Error tool: Responses without valid tool calls - Input tokens: Average input tokens per tool call - Output tokens: Average output tokens per tool call (including reasoning) - Time: Average time per tool call in seconds - Cost: Average cost per tool call in milli-dollars - Dark mode support with inverted tooltip colors - Uses cursor: help to indicate hover interaction

- Change tooltip position from above to below (top instead of bottom) - Add overflow-y visible to prevent clipping by table container - Increase padding and add shadow for better visibility

Copilot

Pull request overview

This PR adds hover tooltips to benchmark table column headers in both the main index page and community page. The tooltips provide explanations for each metric using pure CSS, matching the content from the About page, to improve user experience by making metric definitions immediately accessible without navigation.

Changes:

Added CSS tooltip styles to index.html and community.html with dark mode support
Wrapped column headers with tooltip class and data-tooltip attributes containing metric explanations
Added overflow visibility rules in index.html to prevent tooltip clipping

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 8 comments.

File	Description
site/index.html	Added complete tooltip CSS implementation with positioning below headers, dark mode support, overflow handling, and tooltip markup on all 8 column headers
site/community.html	Added tooltip CSS and markup to column headers, but with inconsistent styling compared to index.html

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-05T14:58:10Z

+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      margin-bottom: 0.5rem;


The tooltip positioning is inconsistent between index.html and community.html. In index.html, tooltips appear below the header (using top: calc(100% + 0.5rem)), but in community.html they appear above (using bottom: 100% and margin-bottom: 0.5rem). According to the PR description, "Tooltips appear below the column headers on hover", so community.html should be updated to match index.html's positioning to ensure consistent behavior across both pages.

Suggested change

bottom: 100%;

left: 50%;

transform: translateX(-50%);

margin-bottom: 0.5rem;

top: calc(100% + 0.5rem);

left: 50%;

transform: translateX(-50%);

Copilot · 2026-02-05T14:58:11Z

+    .tooltip::after {
+      content: attr(data-tooltip);
+      position: absolute;
+      z-index: 50;


The z-index values are inconsistent between the two files. index.html uses z-index: 9999 while community.html uses z-index: 50. This inconsistency could lead to different layering behavior and potential issues with tooltips being hidden behind other elements. Consider using the same z-index value (preferably 9999) in both files to ensure consistent tooltip layering.

Suggested change

z-index: 50;

z-index: 9999;

Copilot · 2026-02-05T14:58:11Z

+    .tooltip:hover::after {
+      visibility: visible;
+      opacity: 1;
+    }


The community.html file is missing the overflow visibility rules that are present in index.html (lines 61-71). These rules ensure that tooltips can overflow the table container and remain visible. Without these styles, tooltips may be clipped by the table's overflow settings, especially when they appear near the edges of the table. Add the following CSS rules after the tooltip styles: styles for thead, thead th, and .overflow-x-auto to set overflow: visible !important where appropriate.

Suggested change

}

}

/* Ensure table and scroll containers don't clip tooltips */

thead {

overflow: visible !important;

}

thead th {

overflow: visible !important;

}

.overflow-x-auto {

overflow-x: auto;

overflow-y: visible !important;

}

Copilot · 2026-02-05T14:58:11Z

+    /* The table wrapper needs overflow-y visible for tooltips above */
+    .overflow-x-auto {
+      overflow-y: visible !important;
+    }


Setting overflow-y: visible !important on .overflow-x-auto elements could interfere with the intended scrolling behavior. The .overflow-x-auto class is typically used to enable horizontal scrolling for tables on smaller screens. By forcing overflow-y: visible, you may prevent proper clipping of content in the vertical direction, which could lead to layout issues. Consider using a more targeted approach, such as adding a specific wrapper class for tables with tooltips or using overflow: clip for the y-axis while maintaining auto for the x-axis in CSS Grid/Flexbox contexts where supported.

Suggested change

/* The table wrapper needs overflow-y visible for tooltips above */

.overflow-x-auto {

overflow-y: visible !important;

}

Copilot · 2026-02-05T14:58:12Z

+      padding: 0.25rem 0.5rem;
+      border-radius: 0.25rem;


The tooltip padding and border-radius differ from index.html. This file uses padding: 0.25rem 0.5rem and border-radius: 0.25rem, while index.html uses padding: 0.5rem 0.75rem and border-radius: 0.375rem. For consistency across both pages, these values should match. The larger padding in index.html provides better readability and visual balance.

Suggested change

padding: 0.25rem 0.5rem;

border-radius: 0.25rem;

padding: 0.5rem 0.75rem;

border-radius: 0.375rem;

Copilot · 2026-02-05T14:58:12Z

+      left: 50%;
+      transform: translateX(-50%);
+      margin-bottom: 0.5rem;
+      pointer-events: none;


The tooltip styling in community.html is missing the box-shadow that is present in index.html (box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);). This shadow provides depth and improves the visual hierarchy of the tooltip. For consistency and better UX, add the same box-shadow to the .tooltip::after rule in community.html.

Suggested change

pointer-events: none;

pointer-events: none;

box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),

0 2px 4px -2px rgb(0 0 0 / 0.1);

Copilot · 2026-02-05T14:58:12Z

+    .tooltip:hover::after {
+      visibility: visible;
+      opacity: 1;
+    }


The CSS-only tooltip implementation lacks keyboard accessibility. Users navigating with keyboards cannot trigger tooltips since the :hover pseudo-class only responds to mouse interactions. The cursor: help style also doesn't provide any indication to keyboard users that additional information is available. Consider adding tabindex="0" to the tooltip elements and using :focus in addition to :hover in the CSS selector (e.g., .tooltip:hover::after, .tooltip:focus::after) to ensure keyboard users can also access the tooltip content.

Copilot · 2026-02-05T14:58:12Z

+    .tooltip:hover::after {
+      visibility: visible;
+      opacity: 1;
+    }


The CSS-only tooltip implementation lacks keyboard accessibility. Users navigating with keyboards cannot trigger tooltips since the :hover pseudo-class only responds to mouse interactions. Consider adding tabindex="0" to the tooltip elements and using :focus in addition to :hover in the CSS selector (e.g., .tooltip:hover::after, .tooltip:focus::after) to ensure keyboard users can also access the tooltip content.

stirby added 2 commits February 5, 2026 04:03

Fix tooltip positioning to appear below headers

5cd306d

- Change tooltip position from above to below (top instead of bottom) - Add overflow-y visible to prevent clipping by table container - Increase padding and add shadow for better visibility

stirby requested review from S1M0N38 and Copilot February 5, 2026 14:54

Copilot started reviewing on behalf of stirby February 5, 2026 14:54 View session

Copilot AI reviewed Feb 5, 2026

View reviewed changes

S1M0N38 closed this in 443ad5c Feb 5, 2026

S1M0N38 mentioned this pull request Feb 5, 2026

chore(main): release 1.5.0 #18

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add hover tooltips to benchmark table column headers#20

Add hover tooltips to benchmark table column headers#20
stirby wants to merge 2 commits into
mainfrom
benchmark-table-7yaz

stirby commented Feb 5, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Copilot AI Feb 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-    }
+    }
+    /* Ensure table and scroll containers don't clip tooltips */
+    thead {
+      overflow: visible !important;
+    }
+    thead th {
+      overflow: visible !important;
+    }
+    .overflow-x-auto {
+      overflow-x: auto;
+      overflow-y: visible !important;
+    }

Conversation

stirby commented Feb 5, 2026

Summary

Changes

Tooltip Text (matches About page)

Testing

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants