A Visual Studio Code extension that displays hover information in a floating window. This extension allows you to view hover information (such as type definitions, documentation, and function signatures) in a separate, persistent window that stays visible while you navigate through your code.
Features
Display hover information in a dedicated floating window
Real-time updates as you move your cursor
Markdown rendering with syntax highlighting
Persistent window that remains visible while coding
Clean and modern UI that matches VS Code's theme
Support for all languages with hover providers
Usage
Open any code file in VS Code
Use the keyboard shortcut to open the floating hover window:
Windows/Linux: Ctrl+Alt+H
macOS: Cmd+Alt+H
The hover window will appear in a separate window
Move your cursor in the editor to see hover information update in real-time
Example
// Move cursor over any symbol
const myVariable = 42; // Hover shows: const myVariable: 42
// Function documentation appears in floating window
function calculateSum(a: number, b: number): number {
return a + b;
}
// Type information and documentation
interface User {
name: string;
email: string;
}
How It Works
Activation: Triggered by keyboard shortcut or command
Window Creation: Opens a webview panel in a new window
Cursor Tracking: Monitors cursor position changes in the active editor
Information Retrieval: Fetches hover information from VS Code's hover providers
Real-time Updates: Automatically updates the floating window content
Supported Features
Syntax Highlighting: Code blocks are automatically highlighted
Markdown Support: Full markdown rendering including:
Headers and text formatting
Code blocks with language-specific highlighting
Tables and lists
Links and references
Theme Integration: Respects VS Code's current color theme
Smooth Transitions: Fade-in animations for content updates
Commands
floatingHoverInfo.view: Open the floating hover information window
Keyboard Shortcuts
Platform
Shortcut
Windows/Linux
Ctrl+Alt+H
macOS
Cmd+Alt+H
Requirements
Visual Studio Code version 1.104.0 or higher
Language extensions that provide hover information (most language extensions include this)
Installation
Open VS Code
Go to Extensions (Ctrl+Shift+X)
Search for "Floating Hover Info"
Click Install
UI Features
Live Badge: Indicates real-time connection status
Empty State: Helpful message when no hover information is available
Responsive Design: Adapts to window resizing
Custom Scrollbar: Styled to match VS Code theme
Known Limitations
Hover information depends on language server capabilities
Some complex hover content may not render perfectly
Window position resets when VS Code restarts
Tips
Keep the floating window on a second monitor for constant reference
The window maintains context even when switching between files
Use alongside VS Code's built-in hover feature for maximum productivity
Resize and position the floating window to your preferred setup
Troubleshooting
Window doesn't appear:
Ensure you're using the correct keyboard shortcut
Check that you have an active text editor open
Try using the command palette: Floating Hover Info: Show
No hover information displayed:
Verify that the language extension for your file type is installed
Ensure the cursor is positioned over a symbol with available information
Some elements may not have hover information available
Release Notes
1.0.0
Initial release
Real-time hover information display
Floating window support
Markdown rendering with syntax highlighting
Theme integration
Keyboard shortcut support
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
