fix(SequelCatcher): tooltips

1 files changed, 58 insertions, 43 deletions

diff --git a/src/lib/List/MediaTitleDisplay.svelte b/src/lib/List/MediaTitleDisplay.svelte
index 932e5c1e..edf41120 100644
--- a/src/lib/List/MediaTitleDisplay.svelte
+++ b/src/lib/List/MediaTitleDisplay.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	import type { MediaTitle } from '$lib/Data/AniList/media';
-	import * as tooltipper from '$lib/Tooltip/tooltip';
+	import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
 	import { abbreviate as abbreviated } from '$lib/Utility/string';
 	import settings from '$stores/settings';
+	import { compressToBase64 } from 'lz-string';
 	import * as wanakana from 'wanakana';
 
 	export let title: MediaTitle;
@@ -11,50 +12,64 @@
 	export let tooltip = false;
 </script>
 
-{#if $settings.displayTitleFormat === 'native'}
-	{#if $settings.displayFurigana}
-		{@const kana = abbreviate
-			? abbreviated(wanakana.toKana(title.native), abbreviateTo)
-			: wanakana.toKana(title.native)}
-		{@const native = abbreviate ? abbreviated(title.native, abbreviateTo) : title.native}
+<span id={`title-display-${compressToBase64(title.native)}`}>
+	{#if $settings.displayTitleFormat === 'native'}
+		{#if $settings.displayFurigana}
+			{@const kana = abbreviate
+				? abbreviated(wanakana.toKana(title.native), abbreviateTo)
+				: wanakana.toKana(title.native)}
+			{@const native = abbreviate ? abbreviated(title.native, abbreviateTo) : title.native}
 
-		<span
-			title={title.english || title.romaji || title.native}
-			use:tooltipper.default
-			data-tooltip-disable={!tooltip}
-		>
-			{#if kana === native}
-				{native}
-			{:else}
-				<ruby>
+			<LinkedTooltip
+				content={title.english || title.romaji || title.native}
+				disable={tooltip}
+				pin={`title-display-${compressToBase64(title.native)}`}
+				relative
+				ignoreAnchorStyling
+			>
+				{#if kana === native}
 					{native}
-					<rt>
-						{kana}
-					</rt>
-				</ruby>
-			{/if}
-		</span>
+				{:else}
+					<ruby>
+						{native}
+						<rt>
+							{kana}
+						</rt>
+					</ruby>
+				{/if}
+			</LinkedTooltip>
+		{:else}
+			<LinkedTooltip
+				content={title.english || title.romaji || title.native}
+				disable={tooltip}
+				pin={`title-display-${compressToBase64(title.native)}`}
+				relative
+				ignoreAnchorStyling
+			>
+				{abbreviate ? abbreviated(title.native, abbreviateTo) : title.native}
+			</LinkedTooltip>
+		{/if}
+	{:else if $settings.displayTitleFormat === 'romaji'}
+		<LinkedTooltip
+			content={title.english || title.romaji || title.native}
+			disable={tooltip}
+			pin={`title-display-${compressToBase64(title.native)}`}
+			relative
+			ignoreAnchorStyling
+		>
+			{abbreviate ? abbreviated(title.romaji, abbreviateTo) : title.romaji}
+		</LinkedTooltip>
 	{:else}
-		<span
-			title={title.english || title.romaji || title.native}
-			use:tooltipper.default
-			data-tooltip-disable={!tooltip}
+		<LinkedTooltip
+			content={title.romaji || title.native}
+			disable={tooltip}
+			pin={`title-display-${compressToBase64(title.native)}`}
+			relative
+			ignoreAnchorStyling
 		>
-			{abbreviate ? abbreviated(title.native, abbreviateTo) : title.native}
-		</span>
+			{abbreviate
+				? abbreviated(title.english || title.romaji || title.native, abbreviateTo)
+				: title.english || title.romaji || title.native}
+		</LinkedTooltip>
 	{/if}
-{:else if $settings.displayTitleFormat === 'romaji'}
-	<span
-		title={title.english || title.romaji || title.native}
-		use:tooltipper.default
-		data-tooltip-disable={!tooltip}
-	>
-		{abbreviate ? abbreviated(title.romaji, abbreviateTo) : title.romaji}
-	</span>
-{:else}
-	<span title={title.romaji || title.native} use:tooltipper.default data-tooltip-disable={!tooltip}>
-		{abbreviate
-			? abbreviated(title.english || title.romaji || title.native, abbreviateTo)
-			: title.english || title.romaji || title.native}
-	</span>
-{/if}
+</span>