Merge pull request #705 from patriceac/fix-cut-off-tooltips-display

Fix cut off tooltips display
This commit is contained in:
cmdr2 2022-12-27 10:26:46 +05:30 committed by GitHub
commit f364958c13
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 5 deletions

View File

@ -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>

View File

@ -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%);