Tooltips for some settings

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"

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;
 }

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);
 }