Add an interactive hover/click tooltip layer to rendered packet diagrams so that users can inspect individual fields seeing their bit range, byte offset, and a human-readable description directly on the diagram without leaving the page.
Problem
Packet diagrams are primarily used to document binary protocol structures (TCP headers). Currently the rendered output is a static visual — fields like URG, ACK, or Data Offset are shown as labeled boxes with no additional context. Users have no way to:
- Hover a field to see its bit range and width in bytes
- Add a per-field description or annotation in the diagram source
- Distinguish control flags from data fields visually at a glance
This forces users to maintain a separate reference table alongside the diagram, which defeats the purpose of self-documenting diagrams.
Proposed solution
- Support an optional description annotation per field in the packet syntax: 106: "URG" "Urgent pointer flag"
- Render a tooltip overlay on hover showing: field name, bit range, byte width, and description
- Add a showBits-style config option colorizeByType to visually group control flags vs. data fields using distinct fill colors
- Ensure the tooltip layer is accessible via keyboard navigation and screen readers
Add an interactive hover/click tooltip layer to rendered packet diagrams so that users can inspect individual fields seeing their bit range, byte offset, and a human-readable description directly on the diagram without leaving the page.
Problem
Packet diagrams are primarily used to document binary protocol structures (TCP headers). Currently the rendered output is a static visual — fields like URG, ACK, or Data Offset are shown as labeled boxes with no additional context. Users have no way to:
This forces users to maintain a separate reference table alongside the diagram, which defeats the purpose of self-documenting diagrams.
Proposed solution