A way to have documentation on hover

[fcrozatier]

Hey! It would be great to be able to have a small tooltip when hovering over classes used in templates, displaying their documentation similar to jsdoc.

What do you think of having a syntax similar to jsdoc with an additionnal @cssprop directive to document css custom variables used in a class? For types we could use CSS bracket notation <type> for example

Example (I'm using the to be implement exented attr() function but it's just for demo):

/*
  Displays elements in a grid with each column taking the same amount of space 
  
  @cssprop <length> --gutter — Space between items

  @attr <number> data-cols — The number of columns, set on the parent element
*/
.my-grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(attr(data-cols number, 1), 1fr);
}