feat(manga): use sliding tooltip

1 files changed, 42 insertions, 41 deletions

diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index 42bdb369..4fd18bf4 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -12,7 +12,7 @@
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
 	import { browser } from '$app/environment';
 	import proxy from '$lib/Utility/proxy';
-	import tooltip from '$lib/Tooltip/tooltip';
+	import Tooltip from '../Anime/Tooltip.svelte';
 
 	export let media: Media[];
 	export let cleanCache: () => void;
@@ -104,49 +104,50 @@
 
 		{#if progress !== manga.episodes}
 			<li class="entry">
-				<a
-					href={outboundLink(manga, 'manga', $settings.displayOutboundLinksTo)}
-					target="_blank"
-					title={`<img src="${manga.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
-					use:tooltip
+				<Tooltip
+					id={`manga-${manga.id}`}
+					content={`<img src="${manga.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
+					pin={`manga-${manga.id}`}
 				>
-					<span
-						style={lastUpdatedMedia === manga.id && manga.chapters !== progress
-							? 'color: lightcoral'
-							: ''}
+					<a href={outboundLink(manga, 'manga', $settings.displayOutboundLinksTo)} target="_blank">
+						<span
+							style={lastUpdatedMedia === manga.id && manga.chapters !== progress
+								? 'color: lightcoral'
+								: ''}
+						>
+							<MediaTitle title={manga.title} />
+						</span>
+					</a>
+					{#if $settings.displaySocialButton}
+						[<a href={`https://anilist.co/manga/${manga.id}/social`} target="_blank">S</a>]
+					{/if}
+					<span class="opaque">|</span>
+					{pendingUpdate === manga.id ? progress + 1 : progress}{#if !due}
+						<span class="opaque">/{manga.chapters || '?'}</span>
+					{/if}
+					<button
+						class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`}
+						style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''}
+						on:click={() =>
+							pendingUpdate === manga.id
+								? null
+								: updateMedia(manga.id, manga.mediaListEntry?.progress, media)}
 					>
-						<MediaTitle title={manga.title} />
-					</span>
-				</a>
-				{#if $settings.displaySocialButton}
-					[<a href={`https://anilist.co/manga/${manga.id}/social`} target="_blank">S</a>]
-				{/if}
-				<span class="opaque">|</span>
-				{pendingUpdate === manga.id ? progress + 1 : progress}{#if !due}
-					<span class="opaque">/{manga.chapters || '?'}</span>
-				{/if}
-				<button
-					class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`}
-					style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''}
-					on:click={() =>
-						pendingUpdate === manga.id
-							? null
-							: updateMedia(manga.id, manga.mediaListEntry?.progress, media)}
-				>
-					+
-				</button>
-				{#if due || Math.floor(manga.episodes) < manga.chapters}
-					[{manga.episodes || '?'}]
-					{#await volumeCount(manga) then volumes}
-						{@const volumeProgress = manga.mediaListEntry?.progressVolumes}
+						+
+					</button>
+					{#if due || Math.floor(manga.episodes) < manga.chapters}
+						[{manga.episodes || '?'}]
+						{#await volumeCount(manga) then volumes}
+							{@const volumeProgress = manga.mediaListEntry?.progressVolumes}
 
-						{#if volumes !== null && (volumeProgress || 0) < volumes}
-							<span style="color: lightcoral;">
-								Vol. {volumeProgress} &#8594; {volumes}
-							</span>
-						{/if}
-					{/await}
-				{/if}
+							{#if volumes !== null && (volumeProgress || 0) < volumes}
+								<span style="color: lightcoral;">
+									Vol. {volumeProgress} &#8594; {volumes}
+								</span>
+							{/if}
+						{/await}
+					{/if}
+				</Tooltip>
 			</li>
 		{/if}
 	{/each}