Component Tooltips Should Provide Prop Info

The Problem: When adding a component to a page, it’s cumbersome to need to open the component to view which props exist, and which have default values. It would be more ergonomic for the component’s tooltip to show all of the props available (and any JSDoc markup for each prop).

(For the purposes of this explanation, here's an example component (click to reveal) with a few example props that I will refer to below):

---

Currently, when you hover a component in a page's markup without any ` @component ` tag present in the markup, you get something like this. It doesn't provide any information about the component's props:

If you want that information visible outside of the component, the closest thing we get to this is the error tooltip that shows when a component is missing some props that don’t have default values and thus are undefined by the component. These are required and expected to be provided when the component is used:

This isn’t terribly easy to read to begin with, especially with numerous/complex props, but it does convey that the language server is already aware of the expected props/types on the component, and which ones are optional.

We actually get less no information about the component’s props when the error highlighting disappears. Now I need to open the component to go see what other props/methods are available on it… not a great experience:

Ironically, the props you actually do provide to the component show their JSDoc comments in their own tooltips:

This is weird, because if I’m already passing the prop name in and providing the values, I’m probably past the point of needing the JSDoc comment to guide me.

A solution: I’d like to see the component tag’s tooltip able to provide all of the prop information on hover, along with any JSDoc comments that may exist for each prop. Here’s a crude example (forgive my copy/paste-into-Paint skills here):

Alternatives: The @component comment tag is capable of providing this to some degree, but is considerably more verbose. Moreover, the language server is already aware of these props and types, so we shouldn’t ask the user to type out all the JSDoc syntax within a @component tag, when a comment above each prop could get you 90% of the way there.

[Tymek]

Writing in TS, I care about prop autocomplete much more than about component tooltip, and second version from comment above is more desirable because it’s DRY and with TS you can skip most of the @type {Boolean} [gridlines=true] – noise because it’s inferred.

[jasonlyu123]

It should be possible to do. But I think there should a config to toggle this behaviour. It could get out of hand pretty easily. Especially when dealing with a component library. And I would prefer to just ctrl+I/ctrl+space to trigger completion and go through the props to see the individual docs.

Combine with the mentioned above, we could have a multiple-choice config:

1. fallback, only show it when there’s no @component comment
2. combine, show both
3. disable