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>
