Svelte Actions

<script>
	// use actions to interface with native DOM API's
	function exampleAction(node) {
		// do stuff with the DOM node here
		$effect(() => {
			// node.addEventListener('keydown', ...);

			return () => {
				// node.removeEventListener('keydown', ...);
			};
		});
	}
</script>

<div use:exampleAction></div>

example with parameters and tippy.js:

<script>
import tippy from 'tippy.js';
let content = $state('Hello!');

function tooltip(node, fn) {
	$effect(() => {
		const tooltip = tippy(node, fn());

		return tooltip.destroy;
	});
}
</script>

<button use:tooltip={() => ({ content })}>
	Hover me
</button>