Comfy-Org / Comfy-Org/ComfyUI_frontend
[Feature]: Add hover tooltips and usage hints to node library categories and nodes for beginners (v0.8.36)
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 699
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 490
Description
### What problem are you experiencing?
When opening the Node Library sidebar (左侧栏 → 节点 → 全部节点), there are many folder categories and individual node entries. For beginners who are not familiar with ComfyUI, it is unclear what each category contains and what each node does or how to use it.
Specifically:
1. **Folder categories have no hover tooltip.** Categories like "图像" (image), "潜在空间" (latent), "遮罩" (mask), etc. are just folder names — hovering over them shows nothing. There is no explanation of what kind of nodes are grouped in each category or when to use them.
2. **Individual nodes lack a helpful summary on hover.** Although a node preview panel appears on hover showing inputs/outputs and a description, the description text comes from the server's `nodeDef.json` and may be too brief or technical for beginners to understand the node's purpose and usage.
3. **No "usage hint" or "quick guide" is shown.** New users often have to search externally to learn what a node like "KSampler", "VAEDecode", or "ControlNetLoader" does and how to connect it in a workflow.
This makes the learning curve steep for Chinese-speaking beginners who want to explore ComfyUI's node system.
### When does this problem occur?
- Every time the Node Library sidebar tab is opened
- When browsing node categories to find the right node for a task
- Causing users to constantly search external resources (forums, YouTube, documentation) to understand basic node functions
- This affects every session for new users
### How often do you encounter this problem?
Multiple times per day
### How much does this problem affect your workflow?
Significantly slows down my work
### Current workarounds
- Users click the "?" help button on each node to open the help page, but this requires an extra click and the help page may still lack beginner-friendly explanations
- Users search external resources like YouTube tutorials, forum posts, or documentation
### Ideas for solutions (Optional)
Since the existing `NodeTreeFolder.vue` and `NodeTreeLeaf.vue` components already support mouseenter/mouseleave events (the leaf component shows a `NodePreview`), the feature could be extended by:
1. **Adding tooltips to folder categories**: When hovering over a folder in the node tree, show a tooltip explaining what the category contains. The tooltip text could be stored as i18n keys mapped to each category name.
2. **Enhancing the node preview**: Include a short "usage hint" or "quick tip" from the `nodeDef.usage_hint` or `nodeDef.description` field, displayed in the user's language. The `description` field in `nodeDefs.json` is already translated in the zh locale — it just needs to be surfaced more prominently in the hover preview.
3. **Adding i18n keys for category descriptions**: New locale keys like `nodeCategories.description.xxx` could provide translatable explanations for each node category.
### Additional context
**Version:** ComfyUI Frontend v0.8.36
The `NodeTreeFolder.vue` component (at `src/components/sidebar/tabs/nodeLibrary/NodeTreeFolder.vue`) currently renders folder nodes with zero hover interaction — no tooltip, no preview, nothing. The `NodeTreeLeaf.vue` component does show a `NodePreview` on hover, but the preview content may not be beginner-friendly enough.
The `description` field in `src/locales/zh/nodeDefs.json` is already translated for many nodes, but it is displayed in a compact area at the bottom of the node preview and may be missed by users.
┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-11985-Feature-Add-hover-tooltips-and-usage-hints-to-node-library-categories-and-nodes-fo-3576d73d3650817a8320ef084de500a7) by [Unito](https://www.unito.io)
Contributor guide
Assessment
This issue has not been assessed yet.