Tooltip Fix

This commit is contained in:
ebolam
2022-10-11 15:34:33 -04:00
parent 04d345a82c
commit a326699faa
4 changed files with 28 additions and 25 deletions

View File

@@ -1894,6 +1894,9 @@ body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
position: fixed;
transition: opacity 0s linear 0.5s;
border: 3px ridge grey;
width: 200px;
white-space: normal;
top: calc(var(--mouse-y) * 100vh);

View File

@@ -5060,7 +5060,7 @@ document.addEventListener('mousemove', evt => {
r.style.setProperty("--tooltip_y", "-100%");
r.style.setProperty("--tooltip_y_context", "0%");
} else {
r.style.setProperty("--tooltip_y", "200%");
r.style.setProperty("--tooltip_y", "100%");
r.style.setProperty("--tooltip_y_context", "200%");
}
r.style.setProperty("--mouse-x", evt.clientX / innerWidth);

View File

@@ -24,7 +24,7 @@
<icon class="material-icons-outlined" style="font-size:14px;position:relative;top:2px;">open_in_new</icon>
</span>
</div>
<span class="material-icons-outlined cursor search_icon" title="Search Settings" onclick="open_finder();">search</span>
<span class="material-icons-outlined cursor search_icon" tooltip="Search Settings" onclick="open_finder();">search</span>
<div class="flyout_menu_contents">
<div id="setting_menu_home" class="settings_category_area tab-target tab-target-settings">
@@ -39,13 +39,13 @@
</div>
<div style="text-align: center;">
<button class="settings_button" onclick="socket.emit('load_model_button', {});">
<span class="material-icons-outlined cursor" title="Load Model" style="font-size: 1.4em;">folder_open</span>
<span class="material-icons-outlined cursor" tooltip="Load Model" style="font-size: 1.4em;">folder_open</span>
<span class="button_label">Load Model</span>
</button>
<select class="var_sync_model_selected_preset settings_select presets" onchange='sync_to_server(this)'><option>Preset</option></select>
{% if not on_colab %}
<div class="horde_trigger var_sync_alt_model_model"><input type=checkbox data-size="mini" data-onstyle="success" data-toggle="toggle" class='var_sync_system_horde_share' onchange='sync_to_server(this)'> Share with Horde </div>
<span class="helpicon material-icons-outlined" title="Shares your GPU with other KoboldAI users. Does not share data/stories.">help_icon</span>
<span class="helpicon material-icons-outlined" tooltip="Shares your GPU with other KoboldAI users. Does not share data/stories.">help_icon</span>
{% endif %}
</div>
</div>
@@ -57,7 +57,7 @@
<span class="var_sync_story_story_name fullwidth" contenteditable=true onblur="sync_to_server(this);"></span>
</span>
<span>
<span class="material-icons-outlined cursor" style="padding-top: 8px;" title="Download Story" onclick="document.getElementById('download_iframe').src = 'json';">file_download</span>
<span class="material-icons-outlined cursor" style="padding-top: 8px;" tooltip="Download Story" onclick="document.getElementById('download_iframe').src = 'json';">file_download</span>
</span>
</div>
<div id="text_storyname">
@@ -65,15 +65,15 @@
</div>
<div class="story_title_icons">
<button class="settings_button" onclick="socket.emit('new_story', '');">
<span class="material-icons-outlined cursor" title="New Story">description</span>
<span class="material-icons-outlined cursor" tooltip="New Story">description</span>
<span class="button_label">New Story</span>
</button>
<button class="settings_button" onclick="socket.emit('load_story_list', '');">
<span class="material-icons-outlined cursor" title="Load Story">folder_open</span>
<span class="material-icons-outlined cursor" tooltip="Load Story">folder_open</span>
<span class="button_label">Load Story</span>
</button>
<button class="settings_button var_sync_alt_story_gamesaved" onclick='socket.emit("save_story", null, (response) => {save_as_story(response);});'>
<span class="material-icons-outlined cursor var_sync_alt_story_gamesaved" title="Save Story">save</span>
<span class="material-icons-outlined cursor var_sync_alt_story_gamesaved" tooltip="Save Story">save</span>
<span class="button_label">Save Story</span>
</button>
</div>
@@ -90,7 +90,7 @@
<!---Top Row---->
<span class="setting_label">
<span style="white-space: pre-wrap;">Chat Name: </span>
<span class="helpicon material-icons-outlined" title="Your name for chat mode.">help_icon</span>
<span class="helpicon material-icons-outlined" tooltip="Your name for chat mode.">help_icon</span>
</span>
<!---Bottom Row---->
<span class="setting_item" style="height: 25px;">
@@ -113,7 +113,7 @@
<div id="setting_menu_settings" class="hidden settings_category_area tab-target tab-target-settings">
<div class="preset_area">
<button class="settings_button" onclick="show_save_preset();">
<span class="material-icons-outlined cursor" title="Save Preset">save</span>
<span class="material-icons-outlined cursor" tooltip="Save Preset">save</span>
<span class="button_label">Save Preset</span>
</button>
<select class="var_sync_model_selected_preset settings_select presets" onchange='sync_to_server(this)'><option>Preset</option></select>
@@ -139,7 +139,7 @@
<div class="setting_container_single">
<!---Top Row---->
<span class="setting_label">
<span>Samplers Order:&nbsp;</span><span class="helpicon material-icons-outlined" title="Changes the order of the samplers to have a considerably different effect than just leaving the samplers at their default order.">help_icon</span>
<span>Samplers Order:&nbsp;</span><span class="helpicon material-icons-outlined" tooltip="Changes the order of the samplers to have a considerably different effect than just leaving the samplers at their default order.">help_icon</span>
</span>
<!---Bottom Row---->
<span class="setting_item">
@@ -193,14 +193,14 @@
<!---Top Row---->
<span class="setting_label">
<span style="white-space: pre-wrap;">Soft Prompt: </span>
<span class="helpicon material-icons-outlined" title="Changes how the AI decides what to output.">help_icon</span>
<span class="helpicon material-icons-outlined" tooltip="Changes how the AI decides what to output.">help_icon</span>
</span>
<!---Bottom Row---->
<span class="setting_item">
<!---<span class="material-icons-outlined cursor" onclick="socket.emit('load_softprompt_list', '');">folder_open</span> <span class="var_sync_system_spname"></span>--->
<select autocomplete="off" id="sp" class="var_sync_system_splist var_sync_system_spfilename settings_select" style="width: 140px;margin-right:0px;padding-bottom: 0px;" onclick="socket.emit('load_softprompt', this.value);">
</select>
<span class="material-icons-outlined cursor" style="font-size: 18px;" title="Refresh List" onclick="socket.emit('sp_list_refresh', '');">autorenew</span>
<span class="material-icons-outlined cursor" style="font-size: 18px;" tooltip="Refresh List" onclick="socket.emit('sp_list_refresh', '');">autorenew</span>
</span>
<!---Slider Labels--->
<span class="setting_minlabel"><span style="top: -4px; position: relative;"></span></span>
@@ -210,15 +210,15 @@
<!---Top Row---->
<span class="setting_label">
<span style="white-space: pre-wrap;">Enabled User Scripts: </span>
<span class="helpicon material-icons-outlined" title="Allows for user scripts that modify the way the game functions">help_icon</span>
<span class="helpicon material-icons-outlined" tooltip="Allows for user scripts that modify the way the game functions">help_icon</span>
</span>
<!---Bottom Row---->
<span class="setting_item">
<div style="display: flex;flex-direction: row;">
<select id="loaded_userscripts" class="var_sync_system_userscripts settings_select" multiple style="width:300px;"></select>
<div style="display: flex;flex-direction: column;">
<span class="material-icons-outlined cursor" style="font-size: 24px;" title="Unload File(s)" onclick="unload_userscripts();">delete</span>
<span class="material-icons-outlined cursor" style="font-size: 24px;" title="Load File" onclick="socket.emit('load_userscripts_list', '');">upload_file</span>
<span class="material-icons-outlined cursor" style="font-size: 24px;" tooltip="Unload File(s)" onclick="unload_userscripts();">delete</span>
<span class="material-icons-outlined cursor" style="font-size: 24px;" tooltip="Load File" onclick="socket.emit('load_userscripts_list', '');">upload_file</span>
</div>
</div>
</span>
@@ -238,7 +238,7 @@
<div class="bias_header_score">Score</div>
<div class="bias_header_comp_threshold">
Completion Threshold
<span class="helpicon material-icons-outlined" title="Amount of tokens that must match the phrase before it is force-completed.">help_icon</span>
<span class="helpicon material-icons-outlined" tooltip="Amount of tokens that must match the phrase before it is force-completed.">help_icon</span>
</div>
</div>
</div>
@@ -255,7 +255,7 @@
{% endwith %}
<div class="setting_container">
<span class="setting_label">
<span>Max Game Screen: &nbsp;</span><span class="helpicon material-icons-outlined" title="When enabled and both menus are un-pinned, the game screen will take up all avaialable space. When disabled, the game screen will be centered.">help_icon</span>
<span>Max Game Screen: &nbsp;</span><span class="helpicon material-icons-outlined" tooltip="When enabled and both menus are un-pinned, the game screen will take up all avaialable space. When disabled, the game screen will be centered.">help_icon</span>
</span>
<span class="setting_item">
<input type=checkbox id="preserve_game_space_setting" data-size=mini data-onstyle=success data-toggle=toggle onchange="preserve_game_space(this.checked)"/>
@@ -266,7 +266,7 @@
</div>
<div class="setting_container">
<span class="setting_label">
<span>Options on Right:&nbsp;</span><span class="helpicon material-icons-outlined" title="When enabled and only the story menu is pinned, the generated story options will be shown on the right instead of the left of the game text.">help_icon</span>
<span>Options on Right:&nbsp;</span><span class="helpicon material-icons-outlined" tooltip="When enabled and only the story menu is pinned, the generated story options will be shown on the right instead of the left of the game text.">help_icon</span>
</span>
<span class="setting_item">
<input type=checkbox id="options_on_right" data-size=mini data-onstyle=success data-toggle=toggle onchange="options_on_right(this.checked)"/>
@@ -278,7 +278,7 @@
<div class="setting_container">
<!---Top Row---->
<span class="setting_label">
<span>Font Size:&nbsp;</span><span class="helpicon material-icons-outlined" title="Change the font size of the game text">help_icon</span>
<span>Font Size:&nbsp;</span><span class="helpicon material-icons-outlined" tooltip="Change the font size of the game text">help_icon</span>
</span>
<input autocomplete="off" class="setting_value" id="font_size_cur"
value="1" item_id="font_size"
@@ -313,13 +313,13 @@
<div class="setting_tile_area" id="Substitutions">
<span class="help_text">Automatically replaces phrases that you or the AI insert.</span>
<span class="helpicon material-icons-outlined" title="Can be used to help you insert special characters or automatically correct the AI. The pencil button toggles if a substitution is active or not.">help_icon</span>
<span class="helpicon material-icons-outlined" tooltip="Can be used to help you insert special characters or automatically correct the AI. The pencil button toggles if a substitution is active or not.">help_icon</span>
<div id="substitution-header" class="noselect">
<b>Replace</b> <b>With</b>
</div>
<div id="substitution-container"></div>
<div id="new-sub-card" class="cursor" title="Add Substitution">
<div id="new-sub-card" class="cursor" tooltip="Add Substitution">
<span class="material-icons-outlined">
add
</span>
@@ -342,12 +342,12 @@
</div>
<div class="setting_tile_area" id="Theme">
<select id="selected_theme" class="var_sync_system_theme_list" autocomplete="off" onchange="Change_Theme(this.value);">
</select><span class="material-icons-outlined cursor" title="Refresh List" onclick="socket.emit('theme_list_refresh', '');">autorenew</span>
</select><span class="material-icons-outlined cursor" tooltip="Refresh List" onclick="socket.emit('theme_list_refresh', '');">autorenew</span>
<div id="palette_area">
<b style="font-size: 20px;">Palette</b>
<div id="save_theme_area" >
<input type="text" id="save_theme_name" autocomplete="off" placeholder="New Theme Name"/>
<span class="material-icons-outlined cursor" title="Save Theme" onclick='save_theme();'>save</span>
<span class="material-icons-outlined cursor" tooltip="Save Theme" onclick='save_theme();'>save</span>
</div>
<div class="setting_tile_area" id="Palette">
<table id="Palette_Table" border=1 style="border-color: var(--palette_table_border);">

View File

@@ -55,7 +55,7 @@
<h4 class="section_header" style="margin-left: 12px;">World Info</h4>
<span class="help_text" style="margin-left: 20px;">
Lore information, which the AI recalls by certain words.
<span class="helpicon material-icons-outlined" title="Use this instead of Memory for information on things like characters, objects, events, places, and anything else with detail.">help_icon</span>
<span class="helpicon material-icons-outlined" tooltip="Use this instead of Memory for information on things like characters, objects, events, places, and anything else with detail.">help_icon</span>
</span>
<div class="setting_tile_area wi_settings">
{% with menu='World Info' %}