Getting started with Svelte - Ac

Actions are essentially element-level lifecycle functions. They're useful for things like:

• interfacing with third-party libraries
• lazy-loaded images
• tooltips
• adding custom event handlers

Actions are functions that are called when an element is created. They can return an object with a destroy method that is called after the element is unmounted.

<script>
    import tippy from 'tippy.js';
    import 'tippy.js/dist/tippy.css';
    import 'tippy.js/themes/material.css';

    let content = 'Hello!';

    function tooltip(node, options) {
        const tooltip = tippy(node, options);

        return {
            update(options) {
                tooltip.setProps(options);
            },
            destroy() {
                tooltip.destroy();
            }
        };
    }
</script>

<input bind:value={content} />

<button use:tooltip={{ content, theme: 'material' }}>
    Hover me
</button>