From 36a8765105905f19d1f906a12a7354d85a7bad4f Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sat, 13 Jan 2024 19:44:48 -0800
Subject: feat(settings): add tooltip for rss

---
 src/lib/Tooltip/tooltip.ts       |  7 ++++++-
 src/routes/settings/+page.svelte | 11 +++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/lib/Tooltip/tooltip.ts b/src/lib/Tooltip/tooltip.ts
index fd1428f4..9fa4aa87 100644
--- a/src/lib/Tooltip/tooltip.ts
+++ b/src/lib/Tooltip/tooltip.ts
@@ -3,6 +3,7 @@ const tooltip = (element: HTMLElement) => {
 	let title: string | null;
 	const offset = 10;
 	let timer: number;
+	const above = element.getAttribute('data-tooltip-above') !== null;
 
 	const mouseOver = (event: MouseEvent) => {
 		title = element.getAttribute('title');
@@ -28,7 +29,11 @@ const tooltip = (element: HTMLElement) => {
 
 	const mouseMove = (event: MouseEvent) => {
 		if (div) {
-			div.style.left = `${event.pageX - div.offsetWidth / 2}px`;
+			div.style.left = `${
+				above && event.pageX - div.offsetWidth / 2 > 0
+					? event.pageX - div.offsetWidth / 2
+					: event.pageX + offset
+			}px`;
 			div.style.top = `${event.pageY - div.offsetHeight - offset / 2}px`;
 		}
 	};
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 31880ee8..a5c0e815 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -12,6 +12,7 @@
 	import Category from '$lib/Settings/Category.svelte';
 	import { getNotificationsContext } from 'svelte-notifications';
 	import { options } from '$lib/Notification/options.js';
+	import tooltip from '$lib/Tooltip/tooltip';
 
 	export let data;
 
@@ -58,8 +59,14 @@
 		</button>
 		Your AniList notifications RSS feed URL
 		<SettingHint lineBreak>
-			This <a href="https://en.wikipedia.org/wiki/RSS" target="_blank">RSS</a> feed will return the
-			currently logged in AniList profile's notifications for remote consumption.
+			This <a
+				href="https://en.wikipedia.org/wiki/RSS"
+				target="_blank"
+				title="Web feed data format"
+				use:tooltip
+				data-tooltip-above>RSS</a
+			>
+			feed will return the currently logged in AniList user's notification feed for external consumption.
 			<br />
 			Do not share this link with <b>anyone</b>!
 		</SettingHint>
-- 
cgit v1.2.3