Search code examples
visual-studio-codeterminology

What is the name of the capability in VS Code where you can hover over a variable and see where it's defined?


When you hover over a variable in VS Code, e.g., a function name, there's a small pop up that shows where the function is defined and some other quick details. What is the name of this feature?

I'm setting up VS Code on a new computer, and I'm trying to get that feature, but not sure what it's called.


Solution

  • The built-in feature is aptly referred to as hover or hovers.

    For example, the docs for the built-in Go to Definition mentions it as:

    If you press Ctrl and hover over a symbol, a preview of the declaration will appear

    It is also mentioned in various language-specific features, such as this one for HTML Hover:

    Hover

    Move the mouse over HTML tags or embedded styles and JavaScript to get more information on the symbol under the cursor.

    HTML Hover

    The relevant built-in settings are grouped by *.hover.*, such as:

    // Prefer showing hovers above the line, if there's space.
    "editor.hover.above": true,
    
    // Controls the delay in milliseconds after which the hover is shown.
    "editor.hover.delay": 300,
    
    // Controls whether the hover is shown.
    "editor.hover.enabled": true,
    
    ...
    
    // Show tag and attribute documentation in hover.
    "html.hover.documentation": true,
    
    // Show references to MDN in hover.
    "html.hover.references": true,
    
    ...
    

    The contents however depend on the language of the file (as indicated on the status bar on the lower right of VS Code) and/or the extensions you have installed. For example, you said "shows where the function is defined", but for my Python workspaces, they typically just show the function signature and documentation:

    sample hover popup for Python

    So you would have to check both the built-in settings and the extension settings if you are looking for specific behavior/contents of the hover popup.

    The way for extensions to modify the hover behavior/contents is also referred to as Show Hovers, and so it makes sense for extension-specific settings to refer to it as hover as well:

    Show Hovers

    Hovers show information about the symbol/object that's below the mouse cursor. This is usually the type of the symbol and a description.

    animation of Show Hovers, taken from the VS Code docs