-
Notifications
You must be signed in to change notification settings - Fork 0
Add hover tooltips to benchmark table column headers #20
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -21,6 +21,41 @@ | |||||||||||||||||||||||||||||||||
| <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin> | ||||||||||||||||||||||||||||||||||
| <link rel="preconnect" href="https://cdn.tailwindcss.com" crossorigin> | ||||||||||||||||||||||||||||||||||
| <script src="https://cdn.tailwindcss.com"></script> | ||||||||||||||||||||||||||||||||||
| <style> | ||||||||||||||||||||||||||||||||||
| /* Tooltip styles */ | ||||||||||||||||||||||||||||||||||
| .tooltip { | ||||||||||||||||||||||||||||||||||
| position: relative; | ||||||||||||||||||||||||||||||||||
| cursor: help; | ||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||
| .tooltip::after { | ||||||||||||||||||||||||||||||||||
| content: attr(data-tooltip); | ||||||||||||||||||||||||||||||||||
| position: absolute; | ||||||||||||||||||||||||||||||||||
| z-index: 50; | ||||||||||||||||||||||||||||||||||
| visibility: hidden; | ||||||||||||||||||||||||||||||||||
| opacity: 0; | ||||||||||||||||||||||||||||||||||
| transition: opacity 0.2s ease-in-out; | ||||||||||||||||||||||||||||||||||
| background-color: #18181b; | ||||||||||||||||||||||||||||||||||
| color: #fff; | ||||||||||||||||||||||||||||||||||
| font-size: 0.75rem; | ||||||||||||||||||||||||||||||||||
| font-weight: 400; | ||||||||||||||||||||||||||||||||||
| padding: 0.25rem 0.5rem; | ||||||||||||||||||||||||||||||||||
| border-radius: 0.25rem; | ||||||||||||||||||||||||||||||||||
|
Comment on lines
+41
to
+42
|
||||||||||||||||||||||||||||||||||
| padding: 0.25rem 0.5rem; | |
| border-radius: 0.25rem; | |
| padding: 0.5rem 0.75rem; | |
| border-radius: 0.375rem; |
Copilot
AI
Feb 5, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
| bottom: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| margin-bottom: 0.5rem; | |
| top: calc(100% + 0.5rem); | |
| left: 50%; | |
| transform: translateX(-50%); |
Copilot
AI
Feb 5, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
| 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
AI
Feb 5, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
| } | |
| } | |
| /* 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
AI
Feb 5, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
| Original file line number | Diff line number | Diff line change | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -24,6 +24,52 @@ | |||||||||
| <link rel="preconnect" href="https://cdn.tailwindcss.com" crossorigin> | ||||||||||
| <link rel="preconnect" href="https://player.twitch.tv" crossorigin> | ||||||||||
| <script src="https://cdn.tailwindcss.com"></script> | ||||||||||
| <style> | ||||||||||
| /* Tooltip styles */ | ||||||||||
| .tooltip { | ||||||||||
| position: relative; | ||||||||||
| cursor: help; | ||||||||||
| } | ||||||||||
| .tooltip::after { | ||||||||||
| content: attr(data-tooltip); | ||||||||||
| position: absolute; | ||||||||||
| z-index: 9999; | ||||||||||
| visibility: hidden; | ||||||||||
| opacity: 0; | ||||||||||
| transition: opacity 0.2s ease-in-out; | ||||||||||
| background-color: #18181b; | ||||||||||
| color: #fff; | ||||||||||
| font-size: 0.75rem; | ||||||||||
| font-weight: 400; | ||||||||||
| padding: 0.5rem 0.75rem; | ||||||||||
| border-radius: 0.375rem; | ||||||||||
| white-space: nowrap; | ||||||||||
| top: calc(100% + 0.5rem); | ||||||||||
| left: 50%; | ||||||||||
| transform: translateX(-50%); | ||||||||||
| 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); | ||||||||||
| } | ||||||||||
| .dark .tooltip::after { | ||||||||||
| background-color: #f4f4f5; | ||||||||||
| color: #18181b; | ||||||||||
| } | ||||||||||
| .tooltip:hover::after { | ||||||||||
| visibility: visible; | ||||||||||
| opacity: 1; | ||||||||||
| } | ||||||||||
|
Comment on lines
+57
to
+60
|
||||||||||
| /* Allow tooltips to overflow table container */ | ||||||||||
| thead { | ||||||||||
| overflow: visible !important; | ||||||||||
| } | ||||||||||
| thead th { | ||||||||||
| overflow: visible !important; | ||||||||||
| } | ||||||||||
| /* The table wrapper needs overflow-y visible for tooltips above */ | ||||||||||
| .overflow-x-auto { | ||||||||||
| overflow-y: visible !important; | ||||||||||
| } | ||||||||||
|
Comment on lines
+68
to
+71
|
||||||||||
| /* The table wrapper needs overflow-y visible for tooltips above */ | |
| .overflow-x-auto { | |
| overflow-y: visible !important; | |
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The z-index values are inconsistent between the two files. index.html uses
z-index: 9999while community.html usesz-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.