diff --git a/static/koboldai.css b/static/koboldai.css
index 614407f5..596879f8 100644
--- a/static/koboldai.css
+++ b/static/koboldai.css
@@ -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);
diff --git a/static/koboldai.js b/static/koboldai.js
index fa2fed41..b36328fd 100644
--- a/static/koboldai.js
+++ b/static/koboldai.js
@@ -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);
diff --git a/templates/settings flyout.html b/templates/settings flyout.html
index 8421a555..2dc06cbd 100644
--- a/templates/settings flyout.html	
+++ b/templates/settings flyout.html	
@@ -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);">
diff --git a/templates/story flyout.html b/templates/story flyout.html
index d6e5b7b8..d2451ad9 100644
--- a/templates/story flyout.html	
+++ b/templates/story flyout.html	
@@ -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' %}