feat(user): hololive badges pinned tooltip

1 files changed, 54 insertions, 18 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;