Fix code examples for ToolTip component

[devmount]

What changed?

This change improves the demo code examples and enhances the stories for the ToolTip component. Stories are now grouped by slot or property. Component names and HTML attributes are now in dash-case. Reactivity for the default story is kept intact.

Why?

More organized and consistent documentation.

Limitations and Notes

None.

Applicable Issues

Closes #268

Screenshots

This reorganizes stories from this:

to this:

[davinotdavid]

Thanks for fixing the code examples, looks great so far!

I have a request for this one if that's ok: I think it would be great to have story (or stories) to showcase the tooltip in context (e.g. while hovering a button or an icon).

I know it is not part of the original issue created but since we are touching these stories though so feel free to push back / punt it into a different issue

[devmount]

@davinotdavid That's a great suggestion! I will add a story for contextual usage in this PR.

In general I'm not too happy with our ToolTip implementation. I feel like it would be much more intuitive, if the default slot would contain the element, the Tooltip is shown for...

[davinotdavid]

@devmount agreed, every time I use it I struggle a bit to get it going so we could definitely improve it in the future!

[devmount]

Thanks for confirming this, Davi! I'll cut a ticket for restructuring the component (breaking change) and just add stories for the current usage for now.

[MelissaAutumn]

Thanks for confirming this, Davi! I'll cut a ticket for restructuring the component (breaking change) and just add stories for the current usage for now.

We should maybe model this off of the label element. There's also some light accessibility issues with tool-tip so would be nice to see it restructured in the future. 😄

[MelissaAutumn]

Nice, thanks!