feat(user): hololive badges pinned tooltip

2 files changed, 68 insertions, 24 deletions

diff --git a/src/lib/Tooltip/LinkedTooltip.svelte b/src/lib/Tooltip/LinkedTooltip.svelte
index 7857a58b..36d96f0d 100644
--- a/src/lib/Tooltip/LinkedTooltip.svelte
+++ b/src/lib/Tooltip/LinkedTooltip.svelte
@@ -12,6 +12,7 @@
 	export let tooltipHideDelay = 10;
 	export let debounceDelay = 100;
 	export let tooltipOpacityTransitionTime = 200;
+	export let relative = false;
 
 	let tooltipDiv: HTMLDivElement | null = null;
 	let hideTimeout: number | null = null;
@@ -39,45 +40,80 @@
 				const pinnedElement = document.getElementById(pin);
 
 				if (pinnedElement) {
-					const rect = pinnedElement.getBoundingClientRect();
+					const rectangle = pinnedElement.getBoundingClientRect();
+					const parentRectangle = pinnedElement.offsetParent?.getBoundingClientRect();
 					const tooltipWidth = tooltipDiv.offsetWidth;
 					const tooltipHeight = tooltipDiv.offsetHeight;
-					let top = rect.top - tooltipHeight - offset;
-					let left = rect.left + rect.width / 2 - tooltipWidth / 2;
+					let top = 0;
+					let left = 0;
 
 					switch (pinPosition) {
 						case 'top':
-							top = rect.top - tooltipHeight - offset;
-							left = rect.left + rect.width / 2 - tooltipWidth / 2;
+							if (relative && parentRectangle) {
+								top = rectangle.top - tooltipHeight - offset - parentRectangle.top;
+								left =
+									rectangle.left + rectangle.width / 2 - tooltipWidth / 2 - parentRectangle.left;
+							} else {
+								top = rectangle.top - tooltipHeight - offset;
+								left = rectangle.left + rectangle.width / 2 - tooltipWidth / 2;
+							}
 
 							break;
 						case 'bottom':
-							top = rect.top + rect.height + offset;
-							left = rect.left + rect.width / 2 - tooltipWidth / 2;
+							if (relative && parentRectangle) {
+								top = rectangle.top + rectangle.height + offset - parentRectangle.top;
+								left =
+									rectangle.left + rectangle.width / 2 - tooltipWidth / 2 - parentRectangle.left;
+							} else {
+								top = rectangle.top + rectangle.height + offset;
+								left = rectangle.left + rectangle.width / 2 - tooltipWidth / 2;
+							}
 
 							break;
 						case 'left':
-							top = rect.top + rect.height / 2 - tooltipHeight / 2;
-							left = rect.left - tooltipWidth - offset;
+							if (relative && parentRectangle) {
+								top =
+									rectangle.top + rectangle.height / 2 - tooltipHeight / 2 - parentRectangle.top;
+								left = rectangle.left - tooltipWidth - offset - parentRectangle.left;
+							} else {
+								top = rectangle.top + rectangle.height / 2 - tooltipHeight / 2;
+								left = rectangle.left - tooltipWidth - offset;
+							}
 
 							break;
 						case 'right':
-							top = rect.top + rect.height / 2 - tooltipHeight / 2;
-							left = rect.left + rect.width + offset;
+							if (relative && parentRectangle) {
+								top =
+									rectangle.top + rectangle.height / 2 - tooltipHeight / 2 - parentRectangle.top;
+								left = rectangle.left + rectangle.width + offset - parentRectangle.left;
+							} else {
+								top = rectangle.top + rectangle.height / 2 - tooltipHeight / 2;
+								left = rectangle.left + rectangle.width + offset;
+							}
 
 							break;
 					}
 
-					if (left < 0) left = offset;
-					if (left + tooltipWidth > window.innerWidth)
-						left = window.innerWidth - tooltipWidth - offset;
-					if (top < 0) top = rect.top + rect.height + offset;
-					if (top + tooltipHeight > window.innerHeight)
-						top = window.innerHeight - tooltipHeight - offset;
+					if (relative && parentRectangle) {
+						if (left + parentRectangle.left < 0) left = offset - parentRectangle.left;
+						if (left + tooltipWidth + parentRectangle.left > window.innerWidth)
+							left = window.innerWidth - tooltipWidth - offset - parentRectangle.left;
+						if (top + parentRectangle.top < 0)
+							top = rectangle.top + rectangle.height + offset - parentRectangle.top;
+						if (top + tooltipHeight + parentRectangle.top > window.innerHeight)
+							top = window.innerHeight - tooltipHeight - offset - parentRectangle.top;
+					} else {
+						if (left < 0) left = offset;
+						if (left + tooltipWidth > window.innerWidth)
+							left = window.innerWidth - tooltipWidth - offset;
+						if (top < 0) top = rectangle.top + rectangle.height + offset;
+						if (top + tooltipHeight > window.innerHeight)
+							top = window.innerHeight - tooltipHeight - offset;
+					}
 
 					tooltipPosition.set({
 						x: left,
-						y: top + window.scrollY
+						y: top + (relative ? 0 : window.scrollY)
 					});
 
 					return;
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 850bdb26..deabb6c6 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -19,6 +19,7 @@
 	import type { UserPreferences } from '$lib/Database/userPreferences.js';
 	import SvelteMarkdown from 'svelte-markdown';
 	import MarkdownLink from '$lib/MarkdownLink.svelte';
+	import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
 
 	export let data;
 
@@ -179,15 +180,22 @@
 
 		<div class="card">
 			<div class="hololive-badges">
-				{#each preferences.pinned_hololive_streams as stream}
+				{#each preferences.pinned_hololive_streams as stream, index}
 					{@const avatar = schedule.dict[stream]}
 
 					{#if avatar}
-						<a href={root(`/hololive/${encodeURIComponent(stream)}`)}>
-							<div class="user-grid-hololive-badges" title={stream} use:tooltip>
-								<ParallaxImage source={avatar} alternativeText="Avatar" />
-							</div>
-						</a>
+						<LinkedTooltip
+							content={stream}
+							id={`hololive-badge-${index}`}
+							pin={`hololive-badge-${index}`}
+							relative
+						>
+							<a href={root(`/hololive/${encodeURIComponent(stream)}`)}>
+								<div class="user-grid-hololive-badges">
+									<ParallaxImage source={avatar} alternativeText="Avatar" />
+								</div>
+							</a>
+						</LinkedTooltip>
 					{/if}
 				{/each}
 			</div>