Tooltips improvements

[taylornowotny]

Tooltips to do:

• [ ] Use new tooltips component for icon button, breakpoints, and the options in option rows (and anywhere else in the UI they are not currently applied)
• [ ] Add semicolon to the end of CSS values in the CSS declaration for correct syntax
• [x] Tooltips on properties should only describe the property, not the value. Remove the CSS value from the CSS declaration on tooltips for properties. (currently we try using property:value descriptions, then fallback to property if not found)
• [ ] Tooltips on values include the property and value in the CSS declaration. The only time we see a tooltip for values is in the case of the options in Toggle Groups. We have a separate component for descriptions of values that are within a menu.
• [ ] jump button for style source that can lead user to breakpoint, instance, token
• [ ] link to mdn for css preview

Notes:

Link to docs: https://www.figma.com/file/xCBegXEWxROLqA1Y31z2Xo/%F0%9F%93%96-Webstudio-Design-Docs?type=design&node-id=5025-52255

• "Title" is the name of the trigger in Webstudio.
• "CSS declaration" for properties is the CSS property name
• "CSS declaration" for values is the CSS property name + value (value on the trigger, not current value)
• "Body" is the description of the trigger. In majority of cases a description of the CSS property OR value will work here, but there are exceptions which we can fix individually later.

Design follow up after beta: A solution for long CSS names will be designed A copy-to-clipboard button will be added to the design A shortcut hint will be added to the “Reset” button

[taylornowotny]

Some examples might help to clarify the intended behavior. I'll make some and add them to the docs tomorrow