refac: model item tag styling

src/lib/components/common/Tooltip.svelte

@@ -5,6 +5,8 @@
 
 	import tippy from 'tippy.js';
 
+	export let elementId = '';
+
 	export let placement = 'top';
 	export let content = `I'm a tooltip!`;
 	export let touch = true;
@@ -17,20 +19,30 @@
 	let tooltipElement;
 	let tooltipInstance;
 
-	$: if (tooltipElement && content) {
-		if (tooltipInstance) {
-			tooltipInstance.setContent(DOMPurify.sanitize(content));
+	$: if (tooltipElement && (content || elementId)) {
+		let tooltipContent = null;
+
+		if (elementId) {
+			tooltipContent = document.getElementById(`${elementId}`);
 		} else {
-			tooltipInstance = tippy(tooltipElement, {
-				content: DOMPurify.sanitize(content),
-				placement: placement,
-				allowHTML: allowHTML,
-				touch: touch,
-				...(theme !== '' ? { theme } : { theme: 'dark' }),
-				arrow: false,
-				offset: offset,
-				...tippyOptions
-			});
+			tooltipContent = DOMPurify.sanitize(content);
+		}
+
+		if (tooltipInstance) {
+			tooltipInstance.setContent(tooltipContent);
+		} else {
+			if (content) {
+				tooltipInstance = tippy(tooltipElement, {
+					content: tooltipContent,
+					placement: placement,
+					allowHTML: allowHTML,
+					touch: touch,
+					...(theme !== '' ? { theme } : { theme: 'dark' }),
+					arrow: false,
+					offset: offset,
+					...tippyOptions
+				});
+			}
 		}
 	} else if (tooltipInstance && content === '') {
 		if (tooltipInstance) {
@@ -48,3 +60,5 @@
 <div bind:this={tooltipElement} class={className}>
 	<slot />
 </div>
+
+<slot name="tooltip"></slot>