How to create a hover/context menu on a VS Code status bar item (like GitHub Copilot's menu)?

Question

I'm developing a VS Code extension and want to add a menu that appears when hovering over or clicking a status bar item, similar to how GitHub Copilot displays its menu (see screenshot):

What I Want to Achieve:

A status bar item that shows a context menu with checkboxes and action buttons when clicked/hovered
Menu items that can toggle settings (with visual checkbox indicators)
Action buttons (like "Snooze" in the picture)
The menu should appear directly below the status bar icon, not as a separate QuickPick dialog

I found this article, but the answer doesn't seem to support buttons or any interactive elements.

starball · Accepted Answer · 2025-11-04 11:19:25Z

1

I'm not an expert here, but from what I see in https://code.visualstudio.com/api/references/vscode-api, it doesn't look to me like this functionality is available through the VS Code extension API.

If you look at what VS Code is doing internally to create the chat status bar item, (search this.statusbarService.addEntry, getEntryProps, and take a glance at ChatStatusDashboard), observe that IStatusBarEntryContainer.addEntry takes an IStatusbarEntry, which can have a tooltip property which is a TooltipContent | ITooltipWithCommands, where TooltipContent is string | IMarkdownString | HTMLElement | IManagedHoverTooltipMarkdownString | IManagedHoverTooltipHTMLElement. Compare with the documented extension API StatusBarItem type definition, whose tooltip member is of type string | MarkdownString (see also IExtensionStatusBarItemService.setOrUpdateEntry).

I suppose you could try to assign an HTMLElement or TooltipWithCmmands to the tooltip on what you get from createStatusBarItem, and see if the extension facilities of VS Code reject it or not. I kind of expect it to, but during my skimming of source code, didn't see anything that immediately shows that it would. If it rejects it, I'd suggest you to raise a feature request in the VS Code issue tracker to request this as a feature.

edited Nov 4 at 11:19

answered Nov 4 at 11:01

starball♦

59.5k52 gold badges312 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

starball Nov 4 at 11:02

If anyone reading this ends up raising an issue ticket like I suggested, please either comment here with the link to it, or notify me in it with "@starball5" and a link to this Stack Overflow post so I can update it.

Abdelrahman Abdelaal Nov 4 at 20:09

Thanks for the detailed analysis! You've basically went over what I've tried so far. I tried both StatusBarItem with MarkdownString and LanguageStatusItem. StatusBarItem with MarkdownString is the closest work-around, but limited, while LanguageStatusItem is even more limited, no rich tooltip support. HTML support for MarkdownString only supports inline styling too, so you can't even work around it with CSS. I'll create a feature request to expose this functionality to tooltips and will link it here. Thanks again.

starball Nov 4 at 21:11

@AbdelrahmanAbdelaal out of curiosity, did you try assigning an HTMLElement to the tooltip property? (an aside: if you found this answer helpful, consider upvoting it. you don't have to, but you can)

Collectives™ on Stack Overflow

How to create a hover/context menu on a VS Code status bar item (like GitHub Copilot's menu)?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related