notes

Log | Files | Refs | README

svelte.md (535B)


      1 # Svelte
      2 
      3 ## Attachment factories
      4 
      5 A useful pattern is for a function, such as tooltip in this example, to return
      6 an attachment:
      7 
      8 ```ts
      9 <script lang="ts">
     10 	import tippy from 'tippy.js';
     11 	import type { Attachment } from 'svelte/attachments';
     12 
     13 	let content = $state('Hello!');
     14 
     15 	function tooltip(content: string): Attachment {
     16 		return (element) => {
     17 			const tooltip = tippy(element, { content });
     18 			return tooltip.destroy;
     19 		};
     20 	}
     21 </script>
     22 
     23 <input bind:value={content} />
     24 
     25 <button {@attach tooltip(content)}>
     26 	Hover me
     27 </button>
     28 ```