Svelte Action Examples: use:tooltip

💻 REPL: svelte.dev/rep...
📚 Related Resources
Tutorials svelte.dev/tut...
🥰 Support me www.buymeacoff...
🔗 Want to learn more from me? Check out these links:
Twitter: / lihautan
Blog: lihautan.com/
Newsletter: lihautan.com/n...
#svelte #svelteactions
Thanks for watching 🥰 -- with love, Li Hau

[@edjohnson-williams]

Thanks for a great video. I found that if you left your mouse on the element for a few seconds after your tooltip appears, the browser's native tooltip kicks in too. I fixed this in the REPL by changing the 'title' attribute to 'data-title' and then getting the attribute 'data-title' in tooltip.js and tooltip.v1.js

[@dwstevens1]

To keep the native attribute, could the action not copy the title, delete the attribute, display the tooltip, and then in on destroy it would set the title attribute back to it's original state?

[@lihautan]

Yes exactly that is what I would do. I would still want the element to have the `title` attribute, for accessibility and other reason.
Can check out my updated REPL, with the changes including the `NOTE:`.

[@neil4171]

Thanks for another great video. I have found that using the mouseover event caused problems if the tooltip element contains other elements, for example, I was using the tooltip on a table row - the mouseover element fires each time the mouse enters a child element. Changing the mouseover to mouseenter has sorted that out.

[@indigosay]

25:30 Just turn from div to span

[@JakobVienna]

Thanks a lot for the video. It saved me an eternity to figure out how to make a custom tooltip!

[@ArtifactID]

thanks for video,
please make action about media query... responsive website is good... your explaination is very detail... Good Job...

[@johnhunt1931]

Very nice and helpful video - many thanks! I was wondering while working through the tutorial if component events/props and actions might sometimes be used to solve the same problem, and sure enough, they can. The fact that Svelte supports different ways of solving the same problem indicates how powerful it is. I suppose I will prefer using components where easily possible, since they are more abstract and declarative and save a lot of boilerplate work; but in cases where I need lower-level control over the DOM elements, I will use actions.

[@lihautan]

Yup, there's many ways to do things, do what's feels best for your use case 👍

[@SusanthCom]

Thank you for your time and effort. It helped much ❤️❤️❤️

[@lihautan]

🎉

[@JDalmasca]

I really like this example, but I'm stuck on one issue. How do you update the tooltip title on the component from the action's parameters? I.E., if I want to change the tooltip text dynamically from the parent?
I tried using tooltipComponent.$set({ title: new_title}) within the update() function returned by my action, but it doesn't actually pass the new title in to the referenced component instance. I know the update function triggered and the parameter to the action changed (confirmed with a simple console.log), but I'm guessing update() and .$set() don't work together for some reason?

[@lihautan]

how are you using the actions?
how did you get the reference to the `tooltipComponent`?
from what i see here, calling `.$set()` within `update()` should work
see: svelte.dev/repl/fc84cd39532548e9b5d5559a277a2e53?version=3.49.0

[@bmehder]

This series on Actions has been great!
This is slightly off topic, but I would love to see a tutorial on Svelte's Custom element API. I get stuck when I try to make a custom element using nested components.

[@lihautan]

Sure I'll get to it.
I wonder why not using Svelte components in a nested components instead?

[@wallacerandall4058]

InstaBlaster

[@mdsalahuddin2841]

awesome tutorial, it's helping me a lot to understand svelte components

[@RhUmbUs]

Really good stuff. I learned alot. Thank you!

[@lihautan]

Thanks

[@classicguy7813]

Thanks. Can modal components be draggable?

[@justinoneill2837]

Anything can be anything 🙂

[@joshnuss]

Very cool, thanks for sharing this technique

[@lihautan]

Glad you liked it!

[@ibrahimmohammed3484]

Great tutorial, thank you

[@tarasgordienko]

Thanks, Tan Li Hau for the video. It's great

[@lihautan]

Great that you like it!

[@mpiorowski]

Amazing content, thank You :)

[@roastgg]

Thank you for this.

[@illustrious_rooster]

Instantly earned a subscription from me; great video!

[@lihautan]

Hahaha! Glad to hear that!

[@ericrovell1970]

Thanks for the video! I really like the idea of using component within action, that blown my mind!
The question is, I can't use actions on components, only on html elements. Still, can I use action on Component or forward it inside to the html element somehow?

[@lihautan]

Yea currently you can't use on a component. And I think you could forward the action to the HTML element inside the Component if needed, or import the action directly within the component

[@ericrovell1970]

@@lihautan thank you for reply! I passed action as prop inside the component and put () => {} as default value to prevent error🤓

[@elysium2013]

This is great video. Thanks!

[@lihautan]

You're welcome! 😍

[@vadimmoonpax5718]

Thanks for sharing!

[@lihautan]

You're welcome!

[@BLKMARKET]

Great vid

[@emdeization]

Nice 👍

[@zakariachahboun]

Cool thanks

[@billyclarkgovols]

Liked the component best if it had used a span instead of a div. Thank you!

[@gianfrancobriones]

Annoying.... Title is reactive in DOM but the svelte-tooltip is not...So i'd rather stick with DOM tooltip but it's ugly... CODE || use:tooltip title="hehe {$form.errors.ID_number}"