[SOLVED] How to create a custom dialog on hover over a status bar item in Visual Studio Code

How to create a custom dialog on hover over a status bar item in Visual Studio Code

I'm developing a Visual Studio Code extension and in this context I'm using the status bar api to create a status bar item. The API is relatively basic, it just provides a tooltip property as an action on hover. But the widely used VS Code extension 'GitLens' provides a custom dialog on hover so it can display more and better structured information.

My question is how can I also create a custom dialog on hover over the status bar item?

I've tried to look at the source code in the corresponding repository but due to the complexity of this project failed to figure it out on my own.

Solution

Because of the type of vscode.StatusBarItem.tooltip is string | MarkdownString , We can create rich-text by markdown:

const statusBarItem = window.createStatusBarItem();
statusBarItem.text = 'test';
statusBarItem.tooltip = new MarkdownString('[google](https://www.google.com)');
statusBarItem.show();