From e58d3f8741471146569dcb66184e8c7b475b0443 Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Sun, 27 Oct 2024 04:15:25 +0100
Subject: [PATCH] Tooltips for some settings

---
 Website/modules/Settings.tsx |  8 ++++----
 Website/styles/index.css     | 18 ++++++++++++++++++
 Website/styles/settings.css  |  4 ++++
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/Website/modules/Settings.tsx b/Website/modules/Settings.tsx
index b2c900c..6c16302 100644
--- a/Website/modules/Settings.tsx
+++ b/Website/modules/Settings.tsx
@@ -158,19 +158,19 @@ export default function Settings({backendConnected, apiUri, settings, changeSett
                             <div className="settings-section-content">
                                 <div className="section-item">
                                     <span className="settings-section-title">API Settings</span>
-                                    <label htmlFor="settingApiUri">API URI:</label>
+                                    <label className="tooltip" data-tooltip="Set the URI of the Backend. Include https:// and if necessary port." htmlFor="settingApiUri">API URI:</label>
                                     <input placeholder={frontendSettings.apiUri} type="text" id="settingApiUri"
                                            onKeyDown={SubmitApiUri}/>
-                                    <label htmlFor="userAgent">User Agent:</label>
+                                    <label htmlFor="userAgent" className="tooltip" data-tooltip="Set a custom User-Agent. This will allow more frequent requests to sites.">User Agent:</label>
                                     <input id="userAgent" type="text"
                                            placeholder={backendSettings != undefined ? backendSettings.userAgent : "UserAgent"}
                                            onKeyDown={SubmitUserAgent}/>
                                     <span id="resetUserAgent" onClick={ResetUserAgent}>Reset</span>
-                                    <label htmlFor="aprilFoolsMode">April Fools Mode</label>
+                                    <label htmlFor="aprilFoolsMode" className="tooltip" data-tooltip="Disable all downloads on April 1st">April Fools Mode</label>
                                     <Toggle id="aprilFoolsMode"
                                             checked={backendSettings?.aprilFoolsMode ?? false}
                                             onChange={SetAprilFoolsMode}/>
-                                    <label htmlFor="compression">Image Compression</label>
+                                    <label htmlFor="compression" className="tooltip" data-tooltip="JPEG Compression Quality">Image Compression</label>
                                     <input type="range" min="1" max="100" defaultValue={backendSettings?.compression ?? 50} className="slider" id="compression" onMouseUp={SetCompressImages}/>
                                     <label htmlFor="bwImages">B/W Images</label>
                                     <Toggle id="bwImages"
diff --git a/Website/styles/index.css b/Website/styles/index.css
index eb98325..3e577b6 100644
--- a/Website/styles/index.css
+++ b/Website/styles/index.css
@@ -21,4 +21,22 @@ body{
     font-family: "Inter", sans-serif;
     overflow-x: hidden;
     color: var(--primary-color);
+}
+
+.tooltip {
+    position: relative;
+}
+
+.tooltip:hover:before {
+    display: block;
+    content: attr(data-tooltip, "tooltip");
+    background-color: var(--second-background-color);
+    color: var(--secondary-color);
+    border: 1px solid var(--secondary-color);
+    border-radius: 6px;
+    bottom: 1em;
+    max-width: 90%;
+    position: absolute;
+    padding: 3px 7px 1px;
+    z-index: 999;
 }
\ No newline at end of file
diff --git a/Website/styles/settings.css b/Website/styles/settings.css
index df781c7..85a515f 100644
--- a/Website/styles/settings.css
+++ b/Website/styles/settings.css
@@ -50,6 +50,10 @@
     padding: 5px 5px 35px;
 }
 
+.section-item > * {
+    margin: 2px 0;
+}
+
 .section-item[connector-status="Not Configured"]{
     border-color: var(--primary-color);
 }