Information Tooltips
Relevant source files
The following files were used as context for generating this wiki page:
The Information Tooltip system in ONNX-Station is a critical UI/UX component designed to provide contextual documentation for complex machine learning compilation parameters. These tooltips act as an embedded reference guide, explaining the relationship between high-level UI toggles and their underlying optimum-cli flags or ONNX runtime specifications.
By surfacing technical details such as Command Line Interface (CLI) flag mappings and architectural implications (e.g., VRAM usage or operator fusion), the system ensures that users understand the impact of their configuration choices during the model export and benchmarking processes.
Sources: src/components/InfoTooltip.tsx:66-70, src/components/Sidebar.tsx:75-77
Component Architecture
The InfoTooltip is implemented as a functional React component that utilizes local state and refs to manage visibility and timing. It is built using Tailwind CSS for styling and lucide-react for iconography.
State and Interaction Logic
To prevent accidental triggers, the component implements a 400ms hover delay using a useRef to track a timeout. This ensures that tooltips only appear when a user intentionally hovers over the info icon.
The diagram shows the logic flow from the initial hover event to the rendering of the tooltip overlay.
Sources: src/components/InfoTooltip.tsx:11-30
Positioning System
The component supports 8 distinct directional positions to ensure visibility across different areas of the dashboard (e.g., Sidebar vs. Center Canvas).
| Position Property | CSS Classes | Purpose |
|---|---|---|
right (default) | left-full ml-2 top-0 | Standard right-side display |
bottom-left | right-0 top-full mt-2 | Common in sidebar labels |
top-center | left-1/2 -translate-x-1/2 bottom-full mb-2 | Used for inline dimension overrides |
top-left | right-0 bottom-full mb-2 | Bottom-aligned input labels |
Sources: src/components/InfoTooltip.tsx:32-48
Implementation in Model Configuration
Information tooltips are primarily utilized within the Sidebar and CenterCanvas components to document ExportConfig parameters.
Sidebar Integration
In the Sidebar, tooltips provide high-fidelity descriptions for model sourcing and task mapping. For example, the "Source Strategy" tooltip explains the difference between Hugging Face Hub downloads and local path references.
<label className="...">
Source Strategy <InfoTooltip position="bottom-left" text="Configures whether the model is downloaded dynamically... Sets up the primary search pathway." />
</label>
Sources: src/components/Sidebar.tsx:88-90, src/WorkbenchContext.tsx:66-70
Parameter Mapping and CLI References
A unique feature of the tooltip content is the "Cli Flag Reference" header, which explicitly links UI elements to optimum-cli arguments.
| UI Parameter | Tooltip Description / CLI Reference | File Context |
|---|---|---|
| Opset | Configures the --opset parameter. Sets ONNX operator version. | CenterCanvas.tsx |
| Optimization | Controls the --optimize compilation parameter for graph fusion. | CenterCanvas.tsx |
| Monolith | Tied to --monolith. Prevents dividing layers into shards. | CenterCanvas.tsx |
| Precision | Specifies --dtype. Casting parameters to fp16 or bf16. | CenterCanvas.tsx |
| ATOL/RTOL | The absolute (--atol) and relative (--rtol) discrepancy boundaries. | CenterCanvas.tsx |
Sources: src/components/CenterCanvas.tsx:109-111, src/components/CenterCanvas.tsx:123-125, src/components/CenterCanvas.tsx:159-161, src/components/InfoTooltip.tsx:64-66
Visual Representation and Styling
The tooltips are styled to match the "dark-mode" aesthetic of the ONNX-Station workbench, utilizing a semi-transparent background with backdrop blurring.
The class diagram illustrates the relationship between the core InfoTooltip component and its primary consumer components within the application.
Sources: src/components/InfoTooltip.tsx:4-9, src/components/Sidebar.tsx:6, src/components/CenterCanvas.tsx:4
Visual Composition
- Icon:
Infofromlucide-react, size3.5. - Colors: Transitions from
text-slate-500totext-emerald-500on hover. - Overlay: Width of
64units,bg-[#1a1d23]/95,backdrop-blur-sm, with ashadow-2xlandz-[9999]to ensure it floats above all other elements.
Sources: src/components/InfoTooltip.tsx:55-63
Conclusion
The Information Tooltip system is essential for bridging the gap between a user-friendly GUI and the technical rigors of ONNX model optimization. By providing immediate, localized documentation for parameters like Opset versions and memory overrides, it reduces the learning curve for the optimum-cli toolchain.