fix: add tooltip to truncated span names in HTML report#5164
Conversation
Span names with text-overflow:ellipsis now show the full name on hover via a title attribute.
There was a problem hiding this comment.
Code Review
This is a clean, minimal fix that improves UX without any downsides.
What the change does
Adds a title attribute to the .sp-name span so browsers display a native tooltip with the full span name on hover — matching the existing behavior already applied to the .sp-bar element on the same row.
Observations
Consistency — The .sp-bar div immediately after this span already had a title attribute (esc(s.name) + ' (' + fmt(s.durationMs) + ')'). This change brings the label span in line with that pattern, making the tooltip behavior consistent across both visual representations of the same span.
Correctness — esc(s.name) is used for both the content and the title attribute value, which is correct. HTML-escaping special characters in attribute values prevents attribute injection (e.g. if a span name contains ").
Minimal footprint — Single-character change (+1/-1). No logic changes, no risk of regression.
Suggestion (minor, optional)
The tooltip on .sp-bar shows duration alongside the name (esc(s.name) + ' (' + fmt(s.durationMs) + ')'). You could optionally do the same here for extra context, but the current approach is perfectly fine — the duration is already visible in the adjacent .sp-dur span.
Approved as-is. Good catch that the label was missing this while the bar already had it.
Summary
titleattribute to the.sp-namespan element in the trace timeline so that truncated span names show the full name on hovertext-overflow: ellipsisto long span names, but there was no way to see the full textTest plan
hook: TestHooks.LogTestResult...)