From 2c0bdd63779ca1ca21fa944cb80d19040e9d2bd0 Mon Sep 17 00:00:00 2001
From: patriceac <48073125+patriceac@users.noreply.github.com>
Date: Mon, 26 Dec 2022 10:04:36 -0800
Subject: [PATCH] Fix cut off tooltips display

---
 ui/index.html         | 4 ++--
 ui/media/css/main.css | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index e12397fb..10db2492 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -55,7 +55,7 @@
                     <input id="prompt_from_file" name="prompt_from_file" type="file" /> <!-- hidden -->
                     <label for="negative_prompt" class="collapsible" id="negative_prompt_handle">
                         Negative Prompt
-                        <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Writing-prompts#negative-prompts" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about Negative Prompts</span></i></a>
+                        <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Writing-prompts#negative-prompts" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top">Click to learn more about Negative Prompts</span></i></a>
                         <small>(optional)</small>
                     </label>
                     <div class="collapsible-content">
@@ -97,7 +97,7 @@
                 </div>
 
                 <div id="editor-inputs-tags-container" class="row">
-                    <label>Image Modifiers <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">click an Image Modifier to remove it, use Ctrl+Mouse Wheel to adjust its weight</span></i>:</label>
+                    <label>Image Modifiers <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">click an Image Modifier to remove it, right-click to temporarily disable it, use Ctrl+Mouse Wheel to adjust its weight</span></i>:</label>
                     <div id="editor-inputs-tags-list"></div>
                 </div>
 
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index cef6f669..3a4883a7 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -876,10 +876,11 @@ input::file-selector-button {
 	font-size: 12px;
     background-color: var(--background-color3);
 
-	visibility: hidden;
+    visibility: hidden;
 	opacity: 0;
 	position: absolute;
-	white-space: nowrap;
+	width: max-content;
+	max-width: 300px;
 	padding: 8px 12px;
 	transition: 0.3s all;
 
@@ -895,7 +896,7 @@ input::file-selector-button {
 .simple-tooltip.right {
     right: 0px;
     top: 50%;
-    transform: translate(calc(100% - 15%), -50%);
+    transform: translate(100%, -50%);
 }
 :hover > .simple-tooltip.right {
     transform: translate(100%, -50%);