minor improvement

site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte

@@ -1,5 +1,9 @@
 <script>
+	import { tooltip } from './tooltip.js';
 	let language = "english";
+	let tooltipText;
+
+	$: tooltipText = translations[language].tooltip;
 
 	const translations = {
 		english: {
@@ -10,61 +14,11 @@
 		}
 	};
 
-	function tooltip(node, text) {
-		const tooltip = document.createElement('div');
-		tooltip.textContent = text;
-
-		Object.assign(tooltip.style, {
-			position: 'absolute',
-			background: 'black',
-			color: 'white',
-			padding: '0.5em 1em',
-			fontSize: '12px',
-			pointerEvents: 'none',
-			transform: 'translate(5px, -50%)',
-			borderRadius: '2px',
-			transition: 'opacity 0.4s'
-		});
-
-		function position() {
-			const { top, right, bottom } = node.getBoundingClientRect();
-			tooltip.style.top = `${(top + bottom) / 2}px`;
-			tooltip.style.left = `${right}px`;
-		}
-
-		function append() {
-			document.body.appendChild(tooltip);
-			tooltip.style.opacity = 0;
-			setTimeout(() => tooltip.style.opacity = 1);
-			position();
-		}
-
-		function remove() {
-			tooltip.remove();
-		}
-
-		node.addEventListener('mouseenter', append);
-		node.addEventListener('mouseleave', remove);
-
-		return {
-			update(text) {
-				tooltip.textContent = text;
-				position();
-			},
-
-			destroy() {
-				tooltip.remove();
-				node.removeEventListener('mouseenter', append);
-				node.removeEventListener('mouseleave', remove);
-			}
-		};
-	}
-
 	function toggleLanguage() {
 		language = language === 'english' ? 'latin' : 'english'
 	}
 </script>
 
-<button on:click={toggleLanguage} use:tooltip={translations[language].tooltip}>
+<button on:click={toggleLanguage} use:tooltip={tooltipText}>
 	{language}
 </button>