Recreate Tooltip as a Svelte Action

[endigo9740]

Currently the process of wrapping and using slots is a bit limiting. It means the target and tooltip have to live together. Like so:

However, it may be beneficial to make the break this apart and make the association more abstract and loose. The use case would be able to hover elements on one side of the page, but the tooltip appear elsewhere on the page. Here's an example diagram:

Svelte Actions (aka Directives) are great a DOM-focused manipulation like this. Though I still think it should be paired with a component for more robust designs within the contents of the popup. By using this we could perhaps provide a cleaner syntax for implementing tooltips.

I'll lead the charge on testing this before we proceed.

[endigo9740]

NOTE: here's how to ensure param data stays up to date:
https://discord.com/channels/457912077277855764/1023340103071965194/threads/1024077183158845561

[danawoodman]

+1 for this. I think for a lot of cases a tooltip is the idea candidate for an action:

<button text="Whatever you do, don't press this!" use:tooltip>LAUNCH NUKES!</button>

I wrote up doing this with Tippy.js, but could easily be done with anything else:

https://dev.to/danawoodman/svelte-quick-tip-using-actions-to-integrate-with-javascript-libraries-tippy-tooltips-2m94

[endigo9740]

Hey @danawoodman thanks for sharing. That's so funny you would pop up on here, I actually bookmarked a tip you shared on Twitter just last night:
https://twitter.com/DanaWoodman/status/1574493362740084736

More in regards to your usage of the {$$restProps ?? ''} syntax rather than $props. I also referenced your blog post on local storage stores recently, before we migrated over to this:

• New Utility: LocalStorage Writables #283

Also great timing with this comment. My next two areas of focus is going to be tooltips and menus. Literally starting in like 5 minutes from now. I'm planning to use this similar action-based pattern in both. You literally could not have added this as a more perfect time!

You seem like a guy with a wealth of good info so share so I welcome any other feedback you may have for humble project :) No doubt there's lots to improve!

[danawoodman]

Haha nice! You flatter me fine sir! Glad some of the random tidbits I've posted could help!

Oh and keep up the great work, seems like a really cool project!

[endigo9740]

Great progress on the tooltips today! These are even more compact than the tooltips, given they are dynamically generated completely by the action.

I've created a draft PR for anyone that wants to review. I'll look to flush things out a bit further and finalize documentation asap.

Here's an animated preview:

[endigo9740]

I've pushed one more round of updates to the component. It now has many more options for customizing the look and feel, while still leaning into the Tailwind Elements css styles as the defaults. I've also fully documented the usage, params, and classes available. Unless anyone else has feedback this may be the version we merge!