Vscode: Feature request: configure tooltip max width

[OliverJAsh]

When you hover over a type in a TypeScript file, the tooltip that appears has a very low max width, making it difficult to read long type signatures.

[OliverJAsh]

I would include a screenshot but it's not easy to take a screenshot keeping the tooltip on screen!

[maxhoffmann]

Errors are quite unreadable if the width does not adapt to the font size.

[rakkarage]

it would be nice if the tip used the available space instead of wrapping at an arbitrary point
in c# too

[rakkarage]

[anowell]

Same problem using rust's language server.

[crucialfelix]

General styling control would be very helpful. Also line-height.

Another approach would be to have a bottom panel that displays the full error and the tooltip displays a shortened version.

[rakkarage]

[Tiedye]

When using the auto import feature it is often impossible to differentiate whats what as the import path is cut off due to the limited width of the suggestions window.

[Aggror]

Is this something we can adjust with custom css? It makes snippet infoormation very difficult to read as well.

[MikhailArkhipov]

Same in Python. We have to jump through hoops trying to flow doc nicely. And when it appears OK on Windows, it breaks on Mac...

And it is inconsistent. Ex, hover is OK

But completion list decides to wrap. What gives?

Looks like hover respects markdown while completion item doc is plain string and gets wrapped randomly.

[rakkarage]

[KaelWD]

Someone say long type signatures?

[ShenHongFei]

Here is a workaround by hacking the file "C:Program FilesMicrosoft VS Coderesourcesappoutvsworkbenchworkbench.main.css"

    /* suggest-widget size */
        .monaco-editor .suggest-widget.docs-side {
            width: 1600px;
        }
        .monaco-editor .suggest-widget.docs-side > .details {
            width: 70%;
            max-height: 800px !important;
        }
        .monaco-editor .suggest-widget.docs-side > .tree {
            width: 30%;
            float: left;
        }

    /* parameter-hints-widget */
        .editor-widget.parameter-hints-widget.visible {
            max-height: 800px !important;
        }
        .monaco-editor .parameter-hints-widget > .wrapper {
            max-width: 1600px;
        }

    /* editor-hover */
        .monaco-editor-hover .monaco-editor-hover-content {
            max-width: 1600px;
        }

Simply append the code above after the original content of file, and restart VSCode. (Title bar may alert a warning message "Not Supported" and hacked changes would be overridden by updating VSCode)

[7sharp9]

It would be nice to have some control on the width.

The above does work but vscode presents the message your installation may be corrupt on restarting.

[macintacos]

Instead of hacking the CSS directly as @ShenHongFei mentioned above, I recommend using the Custom CSS and JS Loader extension to just override the current CSS. That way when VSCode updates, you can just reload the custom css file that you have specified (personally, I have a dotfiles project where I hold configurations for my shell, Spacemacs, etc. and this custom CSS file goes there).

Until it's officially supported, hacking the CSS is likely the best route. The suggested widths above were a bit much for me, so I settled on the following values for now:

/* suggest-widget size */

.monaco-editor .suggest-widget.docs-side {
  width: 1000px;
}

.monaco-editor .suggest-widget.docs-side > .details {
  width: 60%;
  max-height: 800px !important;
}

.monaco-editor .suggest-widget.docs-side > .tree {
  width: 30%;
  float: left;
}

/* parameter-hints-widget */

.editor-widget.parameter-hints-widget.visible {
  max-height: 800px !important;
}

.monaco-editor .parameter-hints-widget > .wrapper {
  max-width: 1000px;
}

/* editor-hover */

.monaco-editor-hover .monaco-editor-hover-content {
  max-width: 1000px;
}

[joealden]

What is preventing the devs from providing a configuration option for this? This issue has been open for almost 2 years, and it bugs me on a daily basis. Would love to see it fixed.

[tecosaur]

@roblourens (since you seem like the most relevant person to ping) is anything likely to be done about this?

[Astrantia]

@roblourens I would love to hear an explanation from devs too. What are the difficulties of implementing this?
I imagine it's settings a dynamic max-width and adding some more lines to add it in Settings. Are there other design blockers?

[Astrantia]

@rebornix Will you take a look at this? In 3 days it will be a 2 year anniversary for this simple feature request.

[rebornix]

Assigned to @joaomoreno and @misolori as I remember we are going to have some UX improvements for editor tooltips and so on.

[Astrantia]

@joaomoreno @misolori @rebornix maybe now is the time to take this on? current iteration tries to solve parameter hints ux and this is not that much different

[drewlustro]

Result   🎉

---

Instructions

I employed @macintacos's CSS and put together full instructions:

1. Install extension

Custom CSS and JS Loader extension

2. Set permissions

• macOS
  
  
  
  • VS Code: sudo chown -R $(whoami) /Applications/Visual Studio Code.app/Contents/MacOS/Electron
  
  
  • VS Code Insiders: sudo chown -R $(whoami) /Applications/Visual Studio Code - Insiders.app/Contents/MacOS/Electron
  
  
• Linux: sudo chown -R $(whoami) /usr/share/code

3. Create CSS override file

touch ~/.vscode-custom.css:

/* suggest-widget size */

.monaco-editor .suggest-widget.docs-side {
  width: 1000px;
}

.monaco-editor .suggest-widget.docs-side > .details {
  width: 60%;
  max-height: 800px !important;
}

.monaco-editor .suggest-widget.docs-side > .tree {
  width: 30%;
  float: left;
}

/* parameter-hints-widget */

.editor-widget.parameter-hints-widget.visible {
  max-height: 800px !important;
}

.monaco-editor .parameter-hints-widget > .wrapper {
  max-width: 1000px;
}

/* editor-hover */

.monaco-editor-hover .monaco-editor-hover-content {
  max-width: 1000px;
}

Apply CSS file path to settings.json

{
  "vscode_custom_css.imports": ["file:///Users/yourusername/.vscode-custom.css"],
  "vscode_custom_css.policy": true
}

4. Restart

• Restart VSCode
• Ignore _"VSCode is corrupt"_ error
  
  
  
  • You can choose to suppress this notice forever
  
  
• Run command "Reload Custom CSS and JS"

[macintacos]

@drewlustro just as a disclaimer, if anyone modifies the CSS/JS of the app, it comes up at “corrupted” in diagnostic checks, and you’ll typically get pushback if you report issues and include diagnostic information. Or, at least, _I_ received pushback when I had custom CSS/JS enabled, and wouldn’t receive help until I turned it off (even though it was harmless/not related to the issue I was having).

While this is indeed an okay workaround, we should just keep making our voices heard so that this is natively supported.

[drewlustro]

100% agree. This is just a workaround.

It's hard enough to read TypeScript lint as it is! :)

[emlautarom1]

Currenlty using VSCode 1.30.2, followed @drewlustro instructions step by step, but it's not working.
I don't even get the _VSCode corrupt_ error. I'm running Windows 10 (V.1803).

_Edit:_

It was my mistake. For anyone who's having trouble, make sure to run Enable Custom CSS and JS from the command palette. Simply restarting won't work.

[tamuratak]

This issue seems to be fixed in 1.32.0-insider (1.32.0-insider) 2e4d4a6bb16a65303b460795fa4ac734f9aea43e. I hope this is an intended behavior.

I want to thank the developers.

[tamuratak]

This change is related to #67076.

I confirmed that the max width of CompletionItem.documentation is still small as mentioned above.

[tamuratak]

Update: in #69388, only the hovers for problems and the hovers with code blocks become to have larger width. Others have smaller width.

[JoeyRxy]

@ShenHongFei Hello there,your solution is great,but I want to ask how to get rid of the word [Unsupported] at the title.As sort of OCD,sufferring from that.

thx a lot!

[szhu]

沈鸿飞 Hello there,your solution is great,but I want to ask how to get rid of the word [Unsupported] at the title.As sort of OCD,sufferring from that.

This extension was created specifically for solving this: https://marketplace.visualstudio.com/items?itemName=lehni.vscode-fix-checksums

[jpike88]

This has been a long standing annoyance, with an issue that's like 2 and a half year ago. It shouldn't take much effort to have a config property that overrides the width/height of the tooltip, surely? Like, 10 mins of effort?

[szhu]

@jpike88 if it's really 10 mins of effort, then I'm sure you can submit a PR for this? I definitely can't do this in anywhere close to 10 mins, so it would be much appreciated!

[GitClickOk]

Seriously, I want instead of this:

At least something like this (with syntax highlighting it will be even better):

[burner1024]

@jpike88 if it's really 10 mins of effort, then I'm sure you can submit a PR for this? I definitely can't do this in anywhere close to 10 mins, so it would be much appreciated!

There's already been a PR.

I really don't understand this. I figure most VScode devs develop VScode in VScode, are they comfortable with the current state?

[misolori]

@jrieken fyi, it would be great if the hover could be resized like the suggest widget