feat(tooltip): more options

2 files changed, 26 insertions, 10 deletions

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 04cdccf3..0734c47a 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -92,7 +92,7 @@
 			{#if upcoming || notYetReleased || progress !== (anime.nextAiringEpisode?.episode || 9999) - 1}
 				<Tooltip
 					id={`anime-${anime.id}`}
-					tooltipPin={`anime-${anime.id}`}
+					pin={`anime-${anime.id}`}
 					content={anime ? mediaTitle(anime) : ''}
 				>
 					<div class="cover-card">
diff --git a/src/lib/List/Anime/Tooltip.svelte b/src/lib/List/Anime/Tooltip.svelte
index 1a5eb665..ae5cd410 100644
--- a/src/lib/List/Anime/Tooltip.svelte
+++ b/src/lib/List/Anime/Tooltip.svelte
@@ -3,16 +3,17 @@
 	import { fade } from 'svelte/transition';
 
 	export let id: string;
-	export let tooltipPin: string | undefined = undefined;
+	export let pin: string | undefined = undefined;
 	export let content: string;
 	export let disable: boolean = false;
+	export let pinPosition: 'top' | 'bottom' | 'left' | 'right' = 'top';
+	export let offset = 10;
+	export let tooltipTransitionTime = 200;
+	export let tooltipHideDelay = 10;
+	export let debounceDelay = 100;
+	export let tooltipOpacityTransitionTime = 200;
 
 	let tooltipDiv: HTMLDivElement | null = null;
-	const offset = 10;
-	const tooltipTransitionTime = 200;
-	const tooltipHideDelay = 10;
-	const debounceDelay = 100;
-	const tooltipOpacityTransitionTime = 200;
 	let hideTimeout: number | null = null;
 	let debounceTimer: number | null = null;
 	let opacity = 0;
@@ -34,8 +35,8 @@
 
 	const updateTooltipPosition = (x: number, y: number) => {
 		if (tooltipDiv) {
-			if (tooltipPin) {
-				const pinnedElement = document.getElementById(tooltipPin);
+			if (pin) {
+				const pinnedElement = document.getElementById(pin);
 
 				if (pinnedElement) {
 					const rect = pinnedElement.getBoundingClientRect();
@@ -44,6 +45,21 @@
 					let top = rect.top - tooltipHeight - offset;
 					let left = rect.left + rect.width / 2 - tooltipWidth / 2;
 
+					// pin pos
+					if (pinPosition === 'top') {
+						top = rect.top - tooltipHeight - offset;
+						left = rect.left + rect.width / 2 - tooltipWidth / 2;
+					} else if (pinPosition === 'bottom') {
+						top = rect.top + rect.height + offset;
+						left = rect.left + rect.width / 2 - tooltipWidth / 2;
+					} else if (pinPosition === 'left') {
+						top = rect.top + rect.height / 2 - tooltipHeight / 2;
+						left = rect.left - tooltipWidth - offset;
+					} else if (pinPosition === 'right') {
+						top = rect.top + rect.height / 2 - tooltipHeight / 2;
+						left = rect.left + rect.width + offset;
+					}
+
 					if (left < 0) left = offset;
 					if (left + tooltipWidth > window.innerWidth)
 						left = window.innerWidth - tooltipWidth - offset;
@@ -138,7 +154,7 @@
 
 <div
 	{id}
-	data-tooltippin={tooltipPin}
+	data-tooltippin={pin}
 	on:mouseenter={handleMouseEnter}
 	on:mousemove={handleMouseMove}
 	on:mouseleave={handleMouseLeave}