From 32d7835119cd4d7470ad44a93a253f38e2397cd5 Mon Sep 17 00:00:00 2001
From: Malcolm Diller <malcolm@dillerm.io>
Date: Fri, 21 Oct 2022 17:44:04 -0700
Subject: [PATCH] added a simple tooltip to the reset button

---
 ui/index.html         |  9 +++++-
 ui/media/css/main.css | 64 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+), 1 deletion(-)

diff --git a/ui/index.html b/ui/index.html
index d41a1490..2954e8f1 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -103,7 +103,14 @@
             <div class="line-separator">&nbsp;</div>
 
             <div id="editor-settings" class="panel-box settings-box">
-                <h4 class="collapsible">Image Settings<i id="reset-image-settings" class="fa-solid fa-arrow-rotate-left"></i></h4>
+                <h4 class="collapsible">
+                    Image Settings
+                    <i id="reset-image-settings" class="fa-solid fa-arrow-rotate-left">
+                        <span class="simple-tooltip right">
+                            Reset Image Settings
+                        </span>
+                    </i>
+                </h4>
                 <ul id="editor-settings-entries" class="collapsible-content">
                     <li><table>
                     <tr><b class="settings-subheader">Image Settings</b></tr>
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index b1233997..74446f2d 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -576,3 +576,67 @@ input::file-selector-button {
 #promptsFromFileBtn {
     font-size: 9pt;
 }
+
+#reset-image-settings {
+    position: relative;
+}
+
+.simple-tooltip {
+	border-radius: 3px;
+	font-weight: bold;
+	font-size: 16px;
+    background-color: var(--background-color3);
+
+	visibility: hidden;
+	opacity: 0;
+	position: absolute;
+	white-space: nowrap;
+	padding: 8px 12px;
+	transition: 0.3s all;
+
+    pointer-events: none;
+}
+
+@media (hover: hover) {
+    :hover > .simple-tooltip {
+        opacity: 1;
+        visibility: visible;
+    }
+}
+
+/* position specific */
+.simple-tooltip.right {
+    right: 0px;
+    top: 50%;
+    transform: translate(calc(100% - 15%), -50%);
+}
+:hover > .simple-tooltip.right {
+    transform: translate(100%, -50%);
+}
+
+.simple-tooltip.top {
+    top: 0px;
+    left: 50%;
+    transform: translate(-50%, calc(-100% + 15%));
+}
+:hover > .simple-tooltip.top {
+    transform: translate(-50%, -100%);
+}
+
+.simple-tooltip.left {
+    left: 0px;
+    top: 50%;
+    transform: translate(calc(-100% + 15%), -50%);
+}
+:hover > .simple-tooltip.left {
+    transform: translate(-100%, -50%);
+}
+
+.simple-tooltip.bottom {
+    bottom: 0px;
+    left: 50%;
+    transform: translate(-50%, calc(100% - 15%));
+}
+:hover > .simple-tooltip.bottom {
+    transform: translate(-50%, 100%);
+}