Add Mouse Hover functionality #283
Description
Why do we need this improvement?
Currently, the vs-asyncapi-preview extension provides an excellent way to visualize AsyncAPI documents through a live preview. However, it lacks hover-based contextual assistance while editing the AsyncAPI spec in YAML or JSON format. This makes it difficult for developers, especially those new to AsyncAPI to quickly understand fields like channels, $ref, info, components, etc., without repeatedly referencing external documentation.
How will this change help?
- Developers often need to understand the purpose of each key (info, title, channels, $ref, etc.) while authoring or editing AsyncAPI files.
- Without in-editor guidance, there’s increased context-switching, slowing down productivity.
- Many popular VS Code extensions (e.g., for OpenAPI, Kubernetes, Terraform) already offer hover-based tooltips, which enhance the developer experience significantly.
- Hover support aligns with VS Code’s native editing capabilities and keeps the editing experience intuitive.
Screenshots
No response
How could it be implemented/designed?
Implement a HoverProvider using the VS Code API for both yaml and json language IDs that displays short tooltips for commonly used AsyncAPI keywords.
Example:
- Hovering on channels: → channels: Defines available message paths.
- Hovering on $ref → $ref: Reference to a reusable component or schema.
This can be done by creating a file like AsyncAPIHoverProvider.ts and registering the provider inside extension.ts.
🚧 Breaking changes
No
👀 Have you checked for similar open issues?
- I checked and didn't find a similar issue
🏢 Have you read the Contributing Guidelines?
- I have read the Contributing Guidelines
Are you willing to work on this issue?
Yes I am willing to submit a PR!