[IDE] Improve UI presentation of context source hover
<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=546255) </details> <!--IssueSummary end--> # Problem to solve The current hover takes up a lot of space and is a bit awkward to read. See https://gitlab.com/gitlab-org/editor-extensions/meta/-/issues/223 for more details on the problem and user feedback. ## Why it's important This will make it easier for users to quickly understand details about a context source (e.g. project, path, type). ## Proposal ```gherkin Scenario: User hovers a context source in the context menu Given the user has the context menu open And the user hovers a context source with the mouse Then show the hover tip above the context source ``` ```gherkin Scenario: User hovers a context source in the prompt input Given a context source token is shown in the prompt input And the user hovers a token with the mouse Then show the hover tip above the token ``` ## Example | Current | Proposed | | ------ | ------ | | ![Screenshot_2025-05-28_at_4.37.02_PM](/uploads/c638029a1f6e46e0681761bf6f98ddc1/Screenshot_2025-05-28_at_4.37.02_PM.png) | [![Screenshot_2025-05-28_at_4.33.54_PM](https://gitlab.com/-/project/278964/uploads/454e52e954c58d1677dd33eed32f465a/Screenshot_2025-05-28_at_4.33.54_PM.png)](https://gitlab.com/gitlab-org/gitlab/-/issues/546255/designs/ContextMenu_addsource.png) | ## Important links - [Figma](https://www.figma.com/design/py1XaoxXhPpc1jFocBMUnx/%E2%AD%90-Duo-in-the-IDE--16983?node-id=3581-8990&t=qlJE8xkWORZTMdcK-1) - [Prototype iteration 3](https://prototyping-939024.gitlab.io/) (to illustrate the concept, not a 1:1 spec)
issue